twitter-bootstrap Bootstrap 3 - 打印/PDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18482329/
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
Bootstrap 3 - Print / PDF
提问by mtt
I need to print my CV but the old trick
我需要打印我的简历，但老把戏
<link href="css/bootstrap.min.css" rel="stylesheet" media="print">
isn't working anymore since Bootstrap 3 is mobile-first (start from small device and then add media queries for bigger screen) so when i print my browser is keeping the mobile css.
不再工作，因为 Bootstrap 3 是移动优先的（从小型设备开始，然后为更大的屏幕添加媒体查询），所以当我打印我的浏览器时，会保留移动 css。
Correct:
Wrong:
正确：
错误：
How can I fix this? I cannot re-invent bootstrap 3 of course and i can't use bootstrap 2 since syntax is changed.
我怎样才能解决这个问题？我当然不能重新发明 bootstrap 3，我也不能使用 bootstrap 2，因为语法改变了。
I've done a nice template for Curriculum Vitae and I'd like to keep it also on pdf/print format.
我已经为简历制作了一个很好的模板，我想将它也保留在 pdf/print 格式上。
Thanks
谢谢
回答by Bass Jobsen
I'm most case i will expect the print in the non horizontal version maybe? In your case you could try to apply the grid rules on the print media query.
在大多数情况下，我希望打印非水平版本？在您的情况下，您可以尝试在印刷媒体查询上应用网格规则。
In the case you use the small grid (col-sm-*) default, b.e.
如果您使用默认的小网格 (col-sm-*)，则为
<div class="container">
<div class="row">
<div class="col-sm-6">Left</div>
<div class="col-sm-6">Right</div>
</div>
</div> <!-- /container -->
In your grid.less replace @media (min-width: @screen-tablet) {with @media (min-width: @screen-tablet), print {(add print, see: CSS media queries: max-width OR max-height)
Recompile bootstrap and your pdf will have left / right just like screen now.
在您的 grid.less 中替换@media (min-width: @screen-tablet) {为@media (min-width: @screen-tablet), print {（添加打印，请参阅：CSS 媒体查询：max-width OR max-height）重新编译引导程序，您的 pdf 将像现在的屏幕一样向左/向右。
Without Less you could try to add specific css rules for your case like:
如果没有 Less，您可以尝试为您的案例添加特定的 css 规则，例如：
@media print
{
body {width:1200px;}
div[class|=col-]{float:left;}
.col-sm-6{width:50%}
}
Note print.less contains specific rules for print media. This is used to hide the navbar by example. Also the utilities classes: http://getbootstrap.com/css/#responsive-utilitieshave Print classes.
注意 print.less 包含针对打印介质的特定规则。这用于通过示例隐藏导航栏。还有实用程序类：http: //getbootstrap.com/css/#responsive-utilities有 Print 类。
If your browser accept the @viewport (see: http://docs.webplatform.org/wiki/css/atrules/@viewport) it will be possible maybe to do: @media print {@viewport {width:1200px;} } before the bootstrap CSS loads
如果您的浏览器接受@viewport（请参阅：http://docs.webplatform.org/wiki/css/atrules/@viewport ），则可以这样做：@media print {@viewport {width:1200px;} }在引导 CSS 加载之前
回答by kalefranz
Adding a print media query worked for me. This is what I finally stumbled onto.
添加印刷媒体查询对我有用。这是我最终偶然发现的。
@media print {
@page {
size: 330mm 427mm;
margin: 14mm;
}
.container {
width: 1170px;
}
}
回答by balanza
In my project I issued the same problem. Since I've got a app.lessfile in which I import the bootstrap.lesssource, I did the following:
在我的项目中，我发出了同样的问题。由于我有一个app.less导入bootstrap.less源代码的文件，因此我执行了以下操作：
@import "my_path/bootstrap.less";
@media print{
.make-grid(sm);
}
Which is actually what it's done in Bootstrap's grid.lessfile
这实际上是它在 Bootstrapgrid.less文件中所做的
Maybe it's not the cleaner solution, but it's 3-code-lines away ;)
也许这不是更干净的解决方案，但它是 3 行代码；)
