我使用dompdf來呈現(xiàn)一個(gè)pdf文檔。我們在整個(gè)應(yīng)用程序中使用Bootstrap 4，所以我希望能夠在用于生成我們的文檔的twig模板中使用它。

目前，我正面臨一個(gè)Bootstrap 4網(wǎng)格系統(tǒng)在生成的PDF中呈現(xiàn)不佳的問題:元素在同一個(gè)。排格都堆起來了。

我確信模板中加載了引導(dǎo)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>

試試這門課。col-1和。col-11或者。col-sm-1。col-sm-11

可用:

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

這是用于bootstrap 3的

我也有同樣的問題。

然后我在https://github.com/barryvdh/laravel-dompdf/issues/653發(fā)現(xiàn)了這個(gè)問題

我嘗試的一個(gè)技巧是將類col-改為col-xs-現(xiàn)在布局更好了。不如瀏覽器完美，但比以前好。

我用的是bootstrap v4.4.1。

更改后的pdf: