7

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

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

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

正确： 错误：


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

我已经为简历制作了一个不错的模板，并且我想将其保留为 pdf/打印格式。

谢谢

4

3 回答 3

9

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

如果您使用小网格 (col-sm-*) 默认值，则为

    <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 媒体查询：最大宽度或最大高度）重新编译引导程序，您的 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 加载之前

于 2013-08-28T12:08:31.637 回答
5

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

@media print {
  @page {
    size: 330mm 427mm;
    margin: 14mm;
  }
  .container {
    width: 1170px;
  }
}
于 2014-09-19T03:18:06.390 回答
1

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

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

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

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

于 2014-02-24T14:51:57.370 回答