相关疑难解决方法(0)

使用wkhtmltopdf:span问题将Twitter引导页面转换为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>
Run Code Online (Sandbox Code Playgroud)

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

html css pdf-generation wkhtmltopdf twitter-bootstrap

28
推荐指数
2
解决办法
2万
查看次数

Bootstrap打印CSS删除背景颜色

当我使用bootstrap时,它会在我尝试打印页面时删除背景颜色.几乎我网站上的所有内容都是使用bootstrap类,所以我想在bootstrap之外避免很多手动CSS.我发现bootstrap @media print用来删除背景颜色.我也使用了一个bootstrap主题(主题联合),它也删除了背景颜色.

主题united.css

@media print
*, *:before, *:after {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(0, 0, 0) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
Run Code Online (Sandbox Code Playgroud)

bootstrap.min.css

@media print
*, :after, :before {
    color: rgb(0, 0, 0)!important;
    text-shadow: none!important;
    background: 0 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
Run Code Online (Sandbox Code Playgroud)

有没有办法确保在打印时不删除背景颜色而不编辑这2个CSS文件?

例如:当我使用.alert-danger时,我希望在屏幕上显示警告危险,因此将打印为红色框.

见JSFiddle:http: //jsfiddle.net/7mtk7wrh/

html css css3 twitter-bootstrap

22
推荐指数
2
解决办法
2万
查看次数

在bootstrap中禁用@media print?

是否可以完全禁用任何预配置的@media printCSS样式bootstrap而无需重新编译它?

默认情况下应用的打印样式可以在这里看到:https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L6837

我希望我的网页能够按原样打印,并应用所有css标签.特别是颜色,如:

b {
  color: #ff0000;
}
Run Code Online (Sandbox Code Playgroud)

为了从bootstrap禁用打印样式,我必须使用我的自定义样式再次显式覆盖每个属性,例如:

b {
  color: #ff0000 !important;
}
Run Code Online (Sandbox Code Playgroud)

但是没有全局方法来禁用这些默认打印样式吗?

html css twitter-bootstrap

8
推荐指数
1
解决办法
7661
查看次数