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愉快地按预期打印&#x3002;

 <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有&#x5173;

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似乎并不需要它。 我会对另一种方法感兴趣。