Bootstrap 3 – 在每个网格列之后打印布局并中断
如果你拿这个例子（在这里查看： http ： //www.bootply.com/93816 ）
<div class="container"> <div class="row"> <div class="col-md-6">Column1</div> <div class="col-md-6">Column2</div> </div> </div> 当您对生成的页面进行打印预览时，似乎会导致列堆叠/折断（就像浮动被移除一样），而不是在通常的网格布局中显示它们。
我看了一下bootstrap.css的@media print部分，看不到任何与div相关的东西会导致这种情况发生。
有谁知道如何避免这种情况？
Bojangles评论让我朝正确的方向，所以我会回答我自己的问题。
使用根据http://getbootstrap.com/css/#grid-options的“xs”大小的网格列是“超小型设备电话（<768px）”，Bootstrap愉快地按预期打印。;
<div class="container"> <div class="row"> <div class="col-xs-6">Column1</div> <div class="col-xs-6">Column2</div> </div> </div>
解决scheme必须在元素而不是页面本身。 你也不应该依赖col-xs -…，因为这些是为了小屏幕/设备。
问题是页面本身在像素方面很小，所以bootstrap认为它需要应用xs样式。
Bootstrap团队不会解决这个问题，它与https://code.google.com/p/chromium/issues/detail?id=273306有关;
Bootstrap解决scheme是模糊地logging这个“古怪”的行为https://github.com/twbs/bootstrap/issues/12078 。
在我看来，应该有一个col-print -…布局类的集合，所以额外的小和打印可以共存。
我的临时解决scheme如下：
@media print { [class*="col-sm-"] { float: left; } }
你可以使用col-print，在我们的例子中我们使用的是sm，而不是xs，因为我们希望xs阻止布局，这就是为什么利用这些类打印不起作用。
基于Gerard解决scheme，您可以像这样使用bootstrap mixin .make-grid（），所以打印不会落到xs大小
@media print { .make-grid(sm); }
或生成的CSS（如果你不喜欢使用更less）：
@media print { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } .col-sm-pull-12 { right: 100%; } .col-sm-pull-11 { right: 91.66666667%; } .col-sm-pull-10 { right: 83.33333333%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-8 { right: 66.66666667%; } .col-sm-pull-7 { right: 58.33333333%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-5 { right: 41.66666667%; } .col-sm-pull-4 { right: 33.33333333%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-2 { right: 16.66666667%; } .col-sm-pull-1 { right: 8.33333333%; } .col-sm-pull-0 { right: auto; } .col-sm-push-12 { left: 100%; } .col-sm-push-11 { left: 91.66666667%; } .col-sm-push-10 { left: 83.33333333%; } .col-sm-push-9 { left: 75%; } .col-sm-push-8 { left: 66.66666667%; } .col-sm-push-7 { left: 58.33333333%; } .col-sm-push-6 { left: 50%; } .col-sm-push-5 { left: 41.66666667%; } .col-sm-push-4 { left: 33.33333333%; } .col-sm-push-3 { left: 25%; } .col-sm-push-2 { left: 16.66666667%; } .col-sm-push-1 { left: 8.33333333%; } .col-sm-push-0 { left: auto; } .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-0 { margin-left: 0%; } }
我创build了一个单独的print.css并添加了以下内容：
@page { size: A3; margin-left: -5cm; margin-right: -5cm; }
与Chrome工作正常，但负边缘杀死IE浏览器。 Firefox似乎并不需要它。 我会对另一种方法感兴趣。
