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

发布时间：2020-12-14 22:24:47 所属栏目：资源来源：网络整理

导读：我正在使用 Symfony2 Bundle KnpSnappyBundle将html twig模板转换成pdf格式。 KnpSnappyBundle基于Snappy封装，使用wkhtmltopdf。我的模板使用twitter bootstrap 2.3.2 css这样： div class="container" div class="row" div class="span12" h4TITLE/h4 /di

我正在使用 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中。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!