Html Bootstrap 3 - 在每个网格列之后打印布局和中断
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19948474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Print layout and breaks after each grid column
提问by AndyC
If you take this example (view it here: http://www.bootply.com/93816)
如果你拿这个例子（在这里查看：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>
When you do a print preview of the generated page, it seems to cause the columns to stack/break (as if the float is removed) instead of displaying them in the usual grid layout.
当您对生成的页面进行打印预览时，它似乎会导致列堆叠/断开（就像浮动被移除一样），而不是在通常的网格布局中显示它们。
I've had a look at the @media printsections of bootstrap.css and I can't see anything related to divthat would cause that to happen.
我已经查看@media print了 bootstrap.css的部分，但我看不到任何相关的div内容会导致这种情况发生。
Does anyone know how to avoid this?
有谁知道如何避免这种情况？
回答by AndyC
Bojangles comment got me in the right direction, so I'll answer my own question.
Bojangles 评论让我朝着正确的方向前进，所以我会回答我自己的问题。
Using the 'xs' size grid columns, which according to http://getbootstrap.com/css/#grid-optionsis for "Extra small devices Phones (<768px)", Bootstrap happily prints as expected.
使用“xs”大小的网格列，根据http://getbootstrap.com/css/#grid-options是“超小设备手机（<768px）”，Bootstrap 很高兴地按预期打印。
<div class="container">
<div class="row">
<div class="col-xs-6">Column1</div>
<div class="col-xs-6">Column2</div>
</div>
</div>
回答by Gerard
The solution has to be on the elements not the page itself. You also shouldn't rely on col-xs-... because these are for small screen/devices.
解决方案必须在元素上，而不是页面本身。您也不应该依赖 col-xs-... 因为这些适用于小屏幕/设备。
The issue is that the page itself is small in terms of pixels, so bootstrap thinks it needs to apply the xs styles.
问题是页面本身的像素很小，所以引导程序认为它需要应用 xs 样式。
The issue won't be addressed by the Bootstrap team and is related to https://code.google.com/p/chromium/issues/detail?id=273306
Bootstrap 团队不会解决该问题，该问题与https://code.google.com/p/chromium/issues/detail?id=273306有关
The Bootstrap solution was to obscurely document this 'quirky' behavior https://github.com/twbs/bootstrap/issues/12078.
Bootstrap 解决方案是模糊地记录这种“古怪”行为https://github.com/twbs/bootstrap/issues/12078。
In my opinion, there should be a col-print-... set of layout classes so extra small and print can co-exist.
在我看来，应该有一个 col-print-... 一组布局类，这样超小和打印可以共存。
My interim solution is as follows:
我的临时解决方案如下：
@media print {
[class*="col-sm-"] {
float: left;
}
}
You could use col-print, in our case we're using sm, not xs because we want xs to block the layout, which is why utilizing those classes for print won't work.
您可以使用 col-print，在我们的例子中，我们使用 sm，而不是 xs，因为我们希望 xs 阻止布局，这就是为什么使用这些类进行打印是行不通的。
回答by Paolo Sanchi
Based on Gerard solution, you can use the bootstrap mixin .make-grid() like this, so the print is doesn't ever fall to the xs size
基于 Gerard 解决方案，您可以像这样使用 bootstrap mixin .make-grid()，因此打印永远不会降到 xs 大小
@media print {
.make-grid(sm);
}
or the generated css (if you don't like using less):
或生成的 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%;
}
}
回答by user3108913
I created a separate print.css and added the following:
我创建了一个单独的 print.css 并添加了以下内容：
@page {
size: A3;
margin-left: -5cm;
margin-right: -5cm;
}
Works fine with Chrome, but the negative margins kills IE. Firefox doesn't seem to need it. I would be interested in another approach.
适用于 Chrome，但负边距会杀死 IE。Firefox 似乎不需要它。我会对另一种方法感兴趣。
