Bootstrap 4 网格布局与 dompdf 不兼容。

Question

我正在使用dompdf渲染PDF文档。整个应用程序都使用Bootstrap 4，因此我想在生成文档的twig模板中使用它。

目前，我遇到了一个问题，即Bootstrap 4网格系统在生成的PDF中无法很好地呈现：同一.row div中的元素全部堆积在一起。

我确定Bootstrap CSS已在模板中加载。

我的代码:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-1">
            little text
        </div>
        <div class="col-xs-11">
            <h1>Big title</h1>
        </div>
    </div>
</div>

生成的PDF： 更新：使用col-n而不是col-xs-n 我的代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-1">
            little text
        </div>
        <div class="col-11">
            <h1>Big title</h1>
        </div>
    </div>
</div>

- LucileDT

---

我认为这不会起作用，因为dompdf仅支持css 2.1，而bootstrap使用css3进行布局（flexbox）。您可以尝试使用wkhtmltopdf。 - msg

Answer 1

我也遇到了同样的问题。

然后我发现了这个相关问题：https://github.com/barryvdh/laravel-dompdf/issues/653

我尝试的一个提示是将类col-更改为col-xs-，然后布局现在更好了。虽然不像浏览器中那样完美，但比以前好多了。

我正在使用bootstrap v4.4.1。

更改后的PDF：

- Jorge Luis Romano

---

我正在使用<div class="container">。 - Jorge Luis Romano

可以给我分享一下代码吗？我遇到了同样的问题，不知道为什么在 PDF 中无法应用 "row"。 - undefined

Answer 2

尝试使用这个类 .col-1 和 .col-11，或者 .col-sm-1 .col-sm-11

可用：

.col-   .col-sm-    .col-md-    .col-lg-    .col-xl-

col-xs 是用于 bootstrap 3 的

- nickboy

---

谢谢，我已经尝试过了。它改变了输出结果，但没有解决我的问题（我已经编辑了我的问题以展示结果）。 - LucileDT

@LucileDT 我找到了这个 $options = new \Dompdf\Options(); $options->setDpi(150); $dompdf = new \Dompdf($options); - nickboy

我尝试改变文件的DPI，但没有任何结果。 - LucileDT

看起来这是一个未解决的冷案。 - Tim Bogdanov