html - 下一行的 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？我发现如果您假设 10 (2 + 3 + 5) 的列总和不是 12(您的示例 2 + 4 + 6)，则布局非常好。

<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>