Bootstrap 打印和列大小调整

Question

我对 SO 进行了一些挖掘，并找到了有关打印和 bootstrap.css 的各种资源，但我还没有看到这个特定问题的解决方案。

可以说我有一个像 Plnkr 中所示的设置：http://plnkr.co/edit/7ETXQyEvY7S16JTU9wYB ?p=preview

和 HTML 像这样：

   <div class="col-xs-6 red">
      testing
    </div>
    <div class="col-xs-6 blue hidden">
      123
    </div>

CSS 声明在打印过程中该列将被隐藏（在我的真实页面上，stle 不是hiddenbut hidden-print），这是预期的，但是现在是否有col-xs-6 rednow 占据隐藏的蓝色列留下的空白空间。

我知道您可以将样式覆盖col-xs-6为width:100%，但这会影响页面上需要保留的其他列width: 50%。

以前有人遇到过这个问题吗？如果有的话，你是如何解决的？

Answer 1

对于 Bootstrap 4，您需要对 @Lance 的答案进行修改。

@media print {
  .col-print-12 {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

使用相同的 HTML

<div class="col-xs-6 col-print-12 bg-danger">
  Red Column is full width for print
</div>
<div class="col-xs-6 hidden-print bg-primary">
  Blue Column is hidden for print
</div>