html - 正确打印 Twitter Bootstrap

Question

我真的很难正确打印我的 Twitter Bootstrap View ，并且想知道是否有人可以指出我正确的方向。我添加了一个自定义的“print.css”，它覆盖了一些原始的 Bootstrap 样式，以及一些我自己的组件的样式。

这是我的打印对话框:

不确定您是否可以从图像中轻易分辨出来，但是这口井已经失去了它的背景，也没有跨越整个页面宽度。此外，“列”或“跨度”似乎都很不稳定。页面是这样构建的:(只显示第一行以保持干净)

<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;
    }
}

Answer 1

首先 Bootstrap.css 确实带有pre-defined print styles比如:

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

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

其次您可以使用 page-break css rule 进行测试将图表分隔到不同的页面上以获得更清晰的格式。

/** 
 *  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" />