mPDF 和引导列在下一行

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

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

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

注意：设置的宽度定义了内容框的宽度。所以 如果你有两个宽度= 50％的浮动并且其中一个有填充， 边距或边框，它们在页面上不会组合在一起。

在 Bootstrap 3 中，列是浮动的，其中

.row

具有

margin-left

的

margin-right

和

-15px

，并且

.col-{x}

具有

padding-left

和

padding-right

的

15px

以将它们间隔开。

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

$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);

请注意，如果您使用

WriteHTML($styles, 2)

编写样式，您将无法在 HTML 中使用任何其他

<style>

标签。

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

Answer 5

例如：

<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 的一些引导 CSS：

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

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

或者如果 .row > 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 6

对于 pdf，除了将边距大部分强制为 0 之外，我还将每个列的宽度减少 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% 准确的方法是生成表格而不是使用列。如果您有复杂的网格，列内有新行，多个容器中有多个行，并且您需要确保列 100% 对齐，等等，这是最可靠的方法。

对于 MPDF，您已经（希望）定义了打印区域的大小，例如 A4：

width: 21cm; height: 29.7cm;

，因此您可以简单地将该宽度划分为相应的固定列宽：

对于 A4，

col-6

将是

(21 / 12) * 6 = 10.5cm

，依此类推。然后，您可以将这些固定宽度值用于表格、tr、th 和 td，最终结果将 100% 准确，不会出现多级引导网格带来的浮动问题。

Answer 7

您可以尝试以下布局来实现类似于mpdf中网格布局的布局

这是设置为 float:left 的文本。 这是设置为 float:right 的文本。

Answer 8

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

首先我们覆盖引导程序：

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

a 然后我们像这样设置列

<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 中的列看起来很棒