css - 打印页面时，如何将 Bootstrap 3 列扩展为整个页面宽度？

Question

打印应用程序中的页面时，我想隐藏侧面导航并将主要内容的宽度扩展为完整的 12 列（我使用的是 Bootstrap 3）。

这是当前的 html/css。

<div class="row">
  <div class="col-md-3 side-navigation hidden-print">
    ...
  </div>
  <div class="col-md-9">
    ...
  </div>
</div>

打印时扩展第二列宽度的 Bootstrap 惯用方法是什么？

Answer 1

有可能，有额外的 css 规则：

将类print-9添加到您的col-sm-9类。然后将其添加到您的CSS：

@media print {
    .print-9 { width: 100% }
}

Answer 2

扩展安德烈的答案。要考虑偏移量，例如col-offset-1，您需要将 margin-left 设置为 0。

@media print {
    .col-print-12 {width: 100%; margin-left:0px;}
}

Answer 3

目前在 Bootstrap 中回答没有帮助类来执行此操作。当你想完成这样的事情时，你可以用 css 隐藏 div 或用 Javascript 设置第二个 div 的类并将其从 col-md-9 更改为 col-md-12。或者，查看“打印”类的答案。