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 / print格式。

由于

Answer 1

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

如果您使用小网格（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), print {（添加打印，请参阅：CSS media queries: max-width OR max-height）重新编译bootstrap，你的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也有Print类。

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

Answer 2

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

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

Answer 3

在我的项目中，我发出了同样的问题。由于我有一个app.less文件，我在其中导入了bootstrap.less来源，因此我执行了以下操作：

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

这实际上是在Bootstrap的grid.less文件

中完成的

也许这不是更清洁的解决方案，但它是3代码行;）

Bootstrap 3 - 打印/ PDF

3 个答案: