Bootstrap 3 - 打印/PDF答案

【问题标题】：Bootstrap 3 - Print / PDFBootstrap 3 - 打印/PDF
【发布时间】：2013-08-31 04:44:46
【问题描述】：

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

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

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

正确：

错误：

我该如何解决这个问题？我当然不能重新发明 bootstrap 3，也不能使用 bootstrap 2，因为语法发生了变化。

我已经为简历制作了一个不错的模板，我希望它也保留为 pdf/打印格式。

谢谢

【问题讨论】：

标签： pdf twitter-bootstrap printing media-queries twitter-bootstrap-3

【解决方案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）重新编译引导程序，您的 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 有打印类。

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

【讨论】：

我看问题的方向是错误的（html 到 pdf 转换器，强制 chrome 使用特定的媒体查询......）解决方案非常简单，在我眼皮底下，但我看不到它.非常感谢！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

这实际上是它在 Bootstrap 的 grid.less 文件中所做的事情

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

【讨论】：