bootstrap3-Print/PDF

Question

我需要打印我的简历但是老把戏

<link href="css/bootstrap.min.css" rel="stylesheet" media="print">

不工作了，因为Bootstrap 3是移动优先（从小设备开始，然后为更大的屏幕添加媒体查询），所以当我打印我的浏览器保持移动css。

我怎样才能解决这个问题？当然，我不能重新发明引导3，也不能使用引导2，因为语法已经改变。

我已经做了一个很好的简历模板，我想保持它的pdf/打印格式。

谢谢

Answer 1

在我的项目中，我也提出了同样的问题。因为我有一个app.less文件，在其中导入bootstrap.less源代码，所以我做了以下操作：

@import "my_path/bootstrap.less";
@media print{
   .make-grid(sm);
}

这实际上就是它在Bootstrap的网格中所做的。更少的文件

也许这不是更干净的解决方案，但它是3代码行；）

Answer 2

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

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

Answer 3

在大多数情况下，我希望打印的是非水平版本，也许？在您的情况下，您可以尝试在打印媒体查询上应用网格规则。

在使用小网格（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 -->

在你的格子里。减少将@media（最小宽度：@screen tablet）{替换为@media（最小宽度：@screen tablet），打印{（添加打印，请参阅：CSS media querys:max width或max height）重新编译引导程序，您的pdf将具有与屏幕一样的左/右属性。

如果没有更少，您可以尝试为您的情况添加特定的css规则，例如：

@media print 
{
    body {width:1200px;}
    div[class|=col-]{float:left;}
    .col-sm-6{width:50%}
}

注意print.less包含打印媒体的特定规则。这用于通过示例隐藏导航栏。还有实用程序类：http://getbootstrap.com/css/#responsive-utilities有打印类。

如果您的浏览器接受@viewport（请参阅：http://docs.webplatform.org/wiki/css/atrules/@viewport），则可能在引导CSS加载之前执行以下操作：@media print{@viewport{宽度：1200px；}}