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

【问题标题】：How can I expand a Bootstrap 3 column to be the full page width when the page is printed?打印页面时，如何将 Bootstrap 3 列扩展为整个页面宽度？
【发布时间】：2017-04-11 21:02:36
【问题描述】：

打印应用程序中的页面时，我想隐藏侧导航并将主要内容的宽度扩展为完整的 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 惯用方法是什么？

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：