打印：并排分割答案

【问题标题】：Print: Div side by side打印：并排分割
【发布时间】：2018-07-25 13:04:34
【问题描述】：

我需要你的帮助。我有一个表单，它有 2 个并排的 div（左右），作为 2 列。

<div class="row">
    <div class="col-lg-12" id="printable">
      <div class="col-lg-6">
        <form role="form"></form>
      </div>

      <div class="col-lg-6">
        <form role="form"></form>
      </div>
    </div>
</div>

我有两个 javascript 来打印那些 div

<script type="text/javascript">
function printDiv_1(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

function PrintDiv_2() {
    var divContents = document.getElementById("printdivcontent").innerHTML;
    var printWindow = window.open('', '', 'height=200,width=400');
    printWindow.document.write('<html><head><title>Print DIV Content</title>');
    printWindow.document.write('</head><body >');
    printWindow.document.write(divContents);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
}

但结果在 pdf 文件中 格式总是按页面从上到下顺序排列。它变成了 2 行。

如何克服这个问题？我想，我想念 javascript 中的某些内容。

感谢您的建议。

【问题讨论】：

标签： javascript html twitter-bootstrap printing

【解决方案1】：

<div class="row" id="printable">

    <div class="col-lg-6">
        <form role="form"></form>
    </div>

    <div class="col-lg-6">
        <form role="form"></form>
    </div>

</div>

如果在行类之后创建一个列（col-lg-12），那么该行就变得无用了。

【讨论】：

真的很重要吗？我从这个link，嵌套列中得到了例子。而且，它工作正常
其实在 html 中已经出现了 2 列（1 行），但是在 pdf 格式中，它又变成了 1 列和 2 行。

【解决方案2】：

因为col-lg-12 相当于 BootStrap 的行大小。所有的列类都喜欢

col-md-12 , col-sm-12, col-xs-12

所有这些在不同的尺寸上都会以相同的方式起作用。

别忘了，如果你想在一行中有一些元素，让总数等于12

例如，

col-md-6 and col-md-6

col-md-4 and col-md-8

所以，两个col-*-*的总和是12，它们会并排在一起。

如果元素总和大于 12，则后面的元素将位于第一个元素的正下方

【讨论】：

是的，我同意你的回答。但是，在 pdf 格式中，它变成 2 行和 1 列。有什么想法吗？
我认为是同样的原因。当第一行被填满时，以下元素进入新行[无论它包含多少内容]