使用wkhtmltopdf:span问题将Twitter引导页面转换为PDF

Question

我正在使用Symfony2 Bundle 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块中没有支持css.在bootstrap3中,只有col-xs -n规则在@media块之外.

我检查了bootstrap2.3.2 css,似乎spanN规则总是在@media块内.

所以一个丑陋的解决方案将被复制出所有spanN规则到顶级到另一个css文件并将其包含在html中.

Answer 2

我知道这个问题很老，但这个问题仍然存在。在最近的Laravel 5.8和Twitter Bootstrap 4.0.0项目中。.col-md .col通过执行以下操作，我设法使用并获得了完美的结果：

在config/snappy.php--viewport-size 1024x768上添加参数

     'pdf' => array(
        'enabled' => true,
        'binary' => "C:\wkhtmltopdf\bin\wkhtmltopdf --viewport-size 1024x768",
        'timeout' => false,
        'options' => array(),
        'env' => array(),
    )

然后在您看来使用.col-md或.col没有任何问题。

请注意，Bootstrap 4使用公共路径包含到您的 HTML 中。

//Laravel
<link rel="stylesheet" href="{{public_path('css/bootstrap4/bootstrap.min.css')}}">