【问题标题】: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 行代码 ;)

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-06-15
        • 1970-01-01
        • 2015-01-05
        • 1970-01-01
        • 2019-02-02
        • 2017-11-24
        • 2010-10-29
        • 2011-08-31
        相关资源
        最近更新 更多