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不是hidden而是hidden-print），这是预期的，但无论如何现在还有{{ 1}}现在占用隐藏的蓝色列留下的空白区域。

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

之前是否有人遇到此问题，若有，您是如何解决的？

Answer 1

我建议像：

@media print {  
   .col-print-12{
       width:100% !important;
   }
}

然后您的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>

需要

!important来覆盖常规col宽度，因为至少有一个set也适用于打印宽度。

我使用xs as a proxy for the print view here更新了您的插件以演示该概念。平板电脑或更大的移动，红色和蓝色列中的一个红色列。

Answer 2

编辑：如果您只想使用CSS，则必须使用flex属性。看一下这个pen。在任何列上将display: flex更改为display: none，并查看它们如何拉伸以适应可用空间（这会使引导无用）。

在bootstrap列中创建一个div容器，并将visibility: hidden应用于该容器。您希望隐藏而不删除它，这意味着浏览器仍将显示该元素占用的空间。

最好不要将自己的类添加到引导列，而是在其中创建一个容器，以便将类应用到。

display: none完全摆脱了元素并影响了周围其他元素的位置。

Answer 3

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

> as.numeric(!grepl("ca|de", x)) + 1
[1] 1 2 1 1 2 1 2

使用相同的HTML

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