将Twitter的引导页面转换为带有wkhtmltopdf:span问题的PDF

前端之家收集整理的这篇文章主要介绍了将Twitter的引导页面转换为带有wkhtmltopdf:span问题的PDF前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 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>

问题:客户和估计的跨度与原来不一样。
我不知道发生了什么。

解决方法

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

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

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

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

猜你在找的HTML相关文章