Bootstrap 3 - 打印/ PDF

Question

我需要打印我的简历,但旧技巧

<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 /打印格式.

谢谢

Answer 1

我大多数情况下,我会期望非横版的打印可能吗？在您的情况下,您可以尝试在打印媒体查询上应用网格规则.

在使用小网格(col-sm-*)默认值的情况下,be

    <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), print {(添加打印,请参阅:CSS媒体查询: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 ),可能会执行以下操作:@media print {@viewport {width:1200px;}}在引导CSS加载之前

Answer 2

添加打印媒体查询对我有用.这是我最终偶然发现的.

@media print {
  @page {
    size: 330mm 427mm;
    margin: 14mm;
  }
  .container {
    width: 1170px;
  }
}