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% }
}