Html 正确打印 Twitter Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18974662/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Printing Twitter Bootstrap correctly
提问by Nicklas Pouey-Winger
I'm really struggeling to print my Twitter Bootstrap views correctly, and was wondering if anyone could point me in the right direction. I've added a custom "print.css" which overrides some of the original bootstrap styling, as well of styling some of my own components.
我真的很难正确打印我的 Twitter Bootstrap 视图，并且想知道是否有人可以指出我正确的方向。我添加了一个自定义的“print.css”，它覆盖了一些原始的引导程序样式，以及我自己的一些组件的样式。
This is my print dialog:
这是我的打印对话框：
Not sure if you can tell so easily from the image, but the well has lost its background as well as not spanning across the entire page width. Also, the 'columns' or 'spans' seem to be all wonky. Page is built up like this: (Only showing first row to keep it clean)
不确定您是否可以从图像中如此轻松地分辨出来，但是井已经失去了背景并且没有跨越整个页面宽度。此外，“列”或“跨度”似乎都很不稳定。页面是这样构建的：（只显示第一行以保持干净）
<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>
Here's my print.css:
这是我的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;
}
}
回答by MackieeE
FirstlyBootstrap.css does come with pre-defined print stylessuch as:
首先Bootstrap.css 确实带有预定义的打印样式，例如：
/**
* Use these for toggling content for print.
**/
.visible-print {
display: block !important;
}
.hidden-print {
display: none !important;
}
Secondlyyou can test with page-break css ruleto separate the charts onto different pages for cleaner formatting.
其次，您可以使用分页 css 规则进行测试，以将图表分隔到不同的页面上，以实现更清晰的格式。
/**
* Page-break-inside seems to
* be required for Chrome.
**/
div.somechart {
page-break-after: always;
page-break-inside: avoid;
}
Thirdtest with formatting with the rows to take up the full widthon print screen rather than relying on percentages of the span3/col-*-3's and span4/col-*-4's, because it would seem they are behaving correctlyin some way when you take into account:
第三次测试使用行进行格式化以在打印屏幕上占据整个宽度，而不是依赖span3/col-*-3和span4/col-*-4的百分比，因为当您考虑到它们时，它们似乎以某种方式正确运行：
- Sytem printing page margins
- Bootstrap's @print defined margins
- Page gutters
- span percentages at print screen.
- 系统打印页边距
- Bootstrap 的 @print 定义的边距
- 页面装订线
- 打印屏幕上的跨度百分比。
Finallythe last smallthing that's helpful to note (Yes, despite the custom @printstyle!):
最后的最后一个小这是有帮助的一点要注意的（是的，尽管自定义@print风格！）：
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="screen" />
to:
到：
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="all" />
