下一行的mPDF和bootstrap列

Question

我目前正在尝试使用mPDF打印简单的HTML页面。 该页面使用bootstrap完成，非常基本。 在文档之后，我可以打印pdf但是在HTML中一切都很完美，在pdf中，最后一列放在下一行。

以下是我目前正在使用的代码：

$mpdf = new mPDF('c');
$html = '<div class="container">
    <div class="row">
        <div class="col-xs-2" style="background-color: palevioletred;"><strong>A</strong></div>
        <div class="col-xs-4" style="background-color: #808080;"><strong>B</strong></div>
        <div class="col-xs-6" style="background-color: #008000;"><strong>C</strong></div>
    </div>
</div>';
$mpdf->WriteHTML(file_get_contents('./css/bootstrap.css'), 1);
$mpdf->WriteHTML($html, 2);
$mpdf->Output();

预期输出应为：

但是pdf是这样的：

知道为什么会这样吗？可以修复吗？

Answer 1

我知道这是一种解决方法，但您是否尝试过假设最大列宽为10？我发现不是列的总和是12（你的例子2 + 4 + 6），如果你假设10（2 + 3 + 5），那么布局非常好。

<div class="container">
    <div class="row">
        <div class="col-xs-1 text-left">
            L
        </div>
        <div class="col-xs-8 col-sm-10 text-center">
            <h3>Hello</h3>
            <h4>World?</h4>
        </div>
        <div class="col-xs-1 text-right">
            R
        </div>
    </div>
 </div>

Answer 2

我想我找到了另一项对我有用的工作。

    <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>

    </div>

尝试使用所有可用的col类。

Answer 3

例如：

<div class="row">
    <div class="col-xs-4"><?php echo $this->title; ?></div>
    <div class="col-xs-4 text-center">2</div>
    <div class="col-xs-4 text-right"><?php echo $this->date; ?></div>
</div>

覆盖PDF的一些bootstrap css：

.row {
    padding: 0px !important;
    margin: 0px !important; 
}

.row > div {
    margin: 0px !important;
    padding: 0px !important;
}

或 .row＆gt; div 不起作用（对我来说没有），在列div中添加一些类（例如“col”）

<div class="row">
    <div class="col col-xs-4"><?php echo $this->title; ?></div>
    <div class="col col-xs-4 text-center">2</div>
    <div class="col col-xs-4 text-right"><?php echo $this->date; ?></div>
</div>

并使用

.row .col {
    margin: 0px !important;
    padding: 0px !important;
}

Answer 4

对于pdf文件，除了将页边距大多设为0外，我还将每个col的宽度都减小了0.5％，因此一切都非常合适。

一种方法是在html中包含自定义col类：

<div class="col-xs-2 col-p-2">

并在与MPDF一起使用的css文件中定义它们：

.col-p-2{ width: 16.16666667%!important; } /* normal col-2 is 16.66666667% */

如果有人需要，这里是课程：

.col-p-1{width: 7.83333333%!important;}
.col-p-2{width: 16.16666667%!important;}
.col-p-3{width: 24.5%!important;}
.col-p-4{width: 32.83333333%!important;}
.col-p-5{width: 41.16666667%!important;}
.col-p-6{width: 49.5%!important;}
.col-p-7{width: 57.83333333%!important;}
.col-p-8{width: 66.16666667%!important;}
.col-p-9{width: 74.5%!important;}
.col-p-10{width: 82.83333333%!important;}
.col-p-11{width: 91,16666666%!important;}
.col-p-12{width: 99.5%!important;}

编辑：

另一种100％准确的方法是生成表，而不使用cols。如果您具有在col内有新行，在多个容器中有多行并且需要确保各列在一行中都是100％等等的复杂网格，这是最可靠的方法。

对于MPDF，您已经（希望）定义了打印区域的大小，例如A4：width: 21cm; height: 29.7cm;，因此您可以简单地将该宽度划分为相应的固定列宽：

对于A4，col-6将是(21 / 12) * 6 = 10.5cm，依此类推。然后，您可以将这些固定宽度值用于表格，tr，th和td，最终结果将是100％准确的，而不会出现多层引导网格所带来的浮动问题。

Answer 5

这对我有用-

首先，删除所有填充

<div class="row">
<div class="col col-xs-4" style="padding:0px 0px 0px 0px"> 
</div>
<div class="col col-xs-4 text-center"  style="padding:0px 0px 0px 0px"> 
</div>
<div class="col col-xs-4 text-right"  style="padding:0px 0px 0px 0px"></div>
</div>

Answer 6

mPDF文档解释了为什么存在这些Bootstrap列包装问题：

https://mpdf.github.io/what-else-can-i-do/floating-blocks.html

  

注意：设置的宽度定义了内容框的宽度。所以   如果您有两个宽度为50％的浮点，并且其中两个都有填充，   边距或边框，它们将无法在页面上放在一起。

在Bootstrap 3中，列是浮动的，其中.row具有margin-left的{​​{1}}和margin-right，而-15px具有.col-{x}和padding-left中的padding-right来隔开它们。

所以我对OP示例的解决方案是删除Bootstrap边距和填充，如下所示：

15px

请注意，如果您使用$bootstrapCss = file_get_contents('./css/bootstrap.css'); $customCss = ' .row { margin-left: 0; margin-right: 0; } .row .col-xs-1, .row .col-xs-2, .row .col-xs-3, .row .col-xs-4, .row .col-xs-5, .row .col-xs-6, .row .col-xs-7, .row .col-xs-8, .row .col-xs-9, .row .col-xs-10, .row .col-xs-11, .row .col-xs-12 { padding-left: 0; padding-right: 0; }'; $combinedCss = $bootstrapCss . $customCss; $mpdf->WriteHTML($combinedCss, 1); $mpdf->WriteHTML($html, 2); 编写样式，则将无法在HTML中使用其他WriteHTML($styles, 2)标签。

这适用于我的用例，因为我不需要间距填充的间距-但您的里程可能会有所不同。

Answer 7

我知道这已经老了，但我遇到了同样的问题，这是我找到的唯一解决方案

首先我们覆盖引导程序：

.row {
margin: 10px 0px 0px 0px !important;
padding: 0px !important;
}

然后我们设置像这样的列

<div class="row">
    <div class="col-xs-6 col-sm-6">TEST</div>
    <div class="col-sm-6">TEST</div>
</div> 
<div class="row">
    <div class="col-xs-4 col-sm-4">TEST</div>
    <div class="col-xs-4 col-sm-4">TEST</div>
    <div class="col-sm-4">TEST</div>
</div> 

目前，pdf中的列看起来很棒