Bootstrap 3 - 打印/PDF

Posted 2023-03-06

【中文标题】Bootstrap 3 - 打印/PDF

【英文标题】：Bootstrap 3 - Print / 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/打印格式。

谢谢

【参考方案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-6width: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 行代码 ;)