html - 使用 wkhtmltopdf : span issue 将 Twitter Bootstrap 页面转换为 PDF

Question

我正在使用 Symfony2捆绑 KnpSnappyBundle将 html twig 模板转换为 pdf。

KnpSnappyBundle基于Snappy包装器，使用 wkhtmltopdf .

我的模板使用twitter bootstrap 2.3.2 像这样的 CSS:

<div class="container">
    <div class="row">
        <div class="span12">
            <h4>TITLE</h4>
        </div>
    </div>
    <div class="row">
        <div class="span6" id="customers">
            <h5>TITLE</h5>

            <p>TEXT</p>

            <ul class="unstyled">
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
            </ul>
        </div>
        <div class="span6" id="estimate">
            <h5>TITLE</h5>

            <ul class="unstyled">
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
            </ul>
        </div>
    </div>
</div>

问题:客户和估计跨度不在同一条线上。我不知道发生了什么。

Answer 1

这是 Bootstrap3 的解决方案:始终使用 .col-xs-n。

原因是 wkhtmltopdf 不支持 @media block 中的 css。在 bootstrap3 中，@media block 外只有 col-xs-n 规则。

我检查了 bootstrap2.3.2 css，似乎 spanN 规则总是在@media block 内。

所以一个丑陋的解决方案是将所有 spanN 规则复制到顶层到另一个 css 文件并将其包含到 html 中。