正确打印Twitter Bootstrap

Question

正确打印Twitter Bootstrap

30

我在打印Twitter Bootstrap视图时遇到了很大的困难，想知道是否有人能够指点一下我。我已经添加了一个自定义的“print.css”，它覆盖了一些原始的Bootstrap样式，并为我的一些组件设置了样式。

这是我的打印对话框： enter image description here

从图片中不太容易看出来，但阴影部分的背景丢失了，而且没有跨越整个页面宽度。此外，“列”或“跨度”似乎都有些奇怪。页面构建如下：（只显示第一行）

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="row-fluid">
                <div style="height: 150px; width: 300px">
                    <img class="img-rounded" src='data:image/png;base64,@Model.Unit.Image64' />
                </div>
            </div>

            <div class="row-fluid">
                ...
            </div>

        </div>
        <div class="span4">
            ...Pie chart control
        </div>
        <div class="span5">
            ...Bar chart control
        </div>

    </div>
</div>

这是我的print.css：

@media print {
    body {
        margin: 0;
        padding: 0;
        line-height: 1.4em;
        word-spacing: 1px;
        letter-spacing: 0.2px;
        font: 13px Arial, Helvetica,"Lucida Grande", serif;
        color: #000;
    }

    #print-btn #update-btn #nav-left #nav-bar, #selectUnitContainer, .navbar, .sidebar-nav {
        display: none;
    }

    #print-btn, #update-btn, #units {
        display: none;
    }

    #nav-left {
        display: none;
    }

    #report-container {
        visibility: visible;
    }

    .well .span12{
        width: 100%;
        visibility: visible;
    }

    .navbar {
        display: none;
    }

    .sidebar-nav {
        display: none;
    }
}

- Nicklas Pouey-Winger

1

你能找到一个不错的解决方案吗？很有趣，因为我自己用Bootstrap编写了一些网站！=） - MackieeE

嗨@MackieeE :) 很抱歉，我还没有测试这个，因为我现在正在处理另一个问题！一旦我测试过了，我一定会更新这篇文章的，所以请将其加入您的监视列表 :) - Nicklas Pouey-Winger

还要注意不要将 body { height:100% } 改为 height:initial。 - user956584

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MackieeE · Accepted Answer

首先，Bootstrap.css确实带有预定义的打印样式，如：响应式工具打印样式。

/** 
 *  Use these for toggling content for print.
**/
.visible-print {
    display: block !important;
}

.hidden-print {
    display: none !important;
}

其次，您可以使用page-break CSS规则进行测试，以将图表分开放置在不同的页面上，以便更清晰地格式化。

/** 
 *  Page-break-inside seems to
 *  be required for Chrome.
**/
div.somechart { 
   page-break-after: always; 
   page-break-inside: avoid;
}

第三次测试，要求行在打印屏幕上占据全部宽度，而不是依赖于span3/col-*-3和span4/col-*-4的百分比，因为当考虑以下因素时，它们似乎以某种方式表现出正确性：

系统打印页面边距
Bootstrap的@print定义的边距
页面间距
打印屏幕上的跨度百分比。

最后一件值得注意的小事情（是的，尽管有自定义的@print样式！）：

<link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="screen" />

致：

<link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="all" />