我需要打印我的简历,但旧技巧
<link href="css/bootstrap.min.css" rel="stylesheet" media="print">
因为Bootstrap 3是移动优先(从小设备开始,然后为更大的屏幕添加媒体查询),因此不再工作了所以当我打印我的浏览器时保持移动css.
正确：
http://f.cl.ly/items/3s320O0w04021s3b3j2j/print1.png
错误：
http://f.cl.ly/items/3t300Z3c2e1q3G1m0r27/print2.png
我怎样才能解决这个问题？
我当然无法重新发明bootstrap 3,因为语法被更改,所以我无法使用bootstrap 2.
我已经为简历做了一个很好的模板,我想保留它的pdf /打印格式.
谢谢
解决方法
我大多数情况下我会期望非水平版的打印可能吗？在您的情况下,您可以尝试在打印媒体查询上应用网格规则.
在使用小网格(col-sm- *)默认值的情况下,b.e.
<div class="container">
<div class="row">
<div class="col-sm-6">Left</div>
<div class="col-sm-6">Right</div>
</div>
</div> <!-- /container -->
在你的grid.less中取代@media(min-width：@ screen-tablet){用@media(min-width：@ screen-tablet),打印{(添加打印,参见：CSS media queries: max-width OR max-height)
重新编译bootstrap,你的pdf就像屏幕一样左/右.
如果没有Less,您可以尝试为您的案例添加特定的css规则,例如：
@media print
{
body {width:1200px;}
div[class|=col-]{float:left;}
.col-sm-6{width:50%}
}
注意print.less包含打印介质的特定规则.这用于通过示例隐藏导航栏.实用程序类：http://getbootstrap.com/css/#responsive-utilities还有Print类.
如果您的浏览器接受@viewport(参见：http://docs.webplatform.org/wiki/css/atrules/@viewport),则可能会执行以下操作：在引导CSS加载之前@media print {@viewport {width：1200px;}}