bootstrap3-Print/PDF

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

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

因为Bootstrap3是移动的（先从小型设备开始，然后添加媒体查询以获得更大的屏幕），所以当我打印时，我的浏览器将保留移动css

正确：

错：

我怎样才能解决这个问题？ 当然，我不能重新发明Bootstrap3，也不能使用Bootstrap2，因为语法已经改变了

我已经做了一个很好的简历模板，我想保持它的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 -->

注意print.less包含打印介质的特定规则。这用于通过示例隐藏导航栏。还有实用程序类：有打印类

如果浏览器接受@viewport（请参见：），则可能会执行以下操作：

---

@媒体打印{@viewport{width:1200px；}}在引导CSS加载之前

在我的项目中，我发布了相同的问题。由于我有一个

app.less

文件，我在其中导入了

bootstrap.less

源代码，因此我执行了以下操作：

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

这实际上就是它在Bootstrap的

grid.less

文件中所做的

---

也许这不是一个更干净的解决方案，但它离我们只有3行代码；）

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

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

---

我把问题看错了方向（html到pdf转换，强制chrome使用特定的媒体查询…）解决方案很简单，在我看来，但我看不到。非常感谢你！

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