Html 用于打印的 Bootstrap 网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22199429/
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 grid for printing
提问by Gordon Copestake
I would like to design a report page with a different layout for printing to mobile. I am using bootstrap v3. It seems the grid can't differentiate between the two as the breakpoint for printing is the same as the breakpoint for mobile (xs)
我想设计一个具有不同布局的报告页面以打印到移动设备。我正在使用引导程序 v3。似乎网格无法区分两者，因为打印断点与移动断点 (xs) 相同
For example: In the below test html my printed page (or print preview) shows the xs6 columns side by side but the sm6 columns stacked. There isn't a breakpoint between xs and sm.
例如：在下面的测试 html 中，我打印的页面（或打印预览）显示 xs6 列并排显示，但 sm6 列堆叠。xs 和 sm 之间没有断点。
Surely my printed page is wider than my mobile viewport so shouldn't it use the sm layout?
我的打印页面肯定比我的移动视口宽，所以它不应该使用 sm 布局吗？
Am I doing something wrong or is this the way it is? Is there a defined viewport width for printing?
我做错了什么还是就是这样？是否有定义的打印视口宽度？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
xs6
</div>
<div class="col-xs-6">
xs6
</div>
</div>
<div class="row">
<div class="col-sm-6">
sm6
</div>
<div class="col-sm-6">
sm6
</div>
</div>
</div>
</body>
</html>
回答by Fredy31
What I did was to manually recreate those columns classes in my print css.
我所做的是在我的打印 css 中手动重新创建这些列类。
.col-print-1 {width:8%; float:left;}
.col-print-2 {width:16%; float:left;}
.col-print-3 {width:25%; float:left;}
.col-print-4 {width:33%; float:left;}
.col-print-5 {width:42%; float:left;}
.col-print-6 {width:50%; float:left;}
.col-print-7 {width:58%; float:left;}
.col-print-8 {width:66%; float:left;}
.col-print-9 {width:75%; float:left;}
.col-print-10{width:83%; float:left;}
.col-print-11{width:92%; float:left;}
.col-print-12{width:100%; float:left;}
Then I just use those classes like I use bootstrap classes to make my columns for print only. I also created .visible-printand .hidden-printto hide/show elements only in the print version.
然后我只是使用这些类，就像我使用引导程序类来制作我的仅用于打印的列一样。我还创建.visible-print并.hidden-print仅在打印版本中隐藏/显示元素。
It still needs some work, but that quick patch helped me a lot.
它仍然需要一些工作，但是这个快速补丁对我帮助很大。
回答by Ehsan Abidi
If you want the Bootstrap's grid do not print with col-xs (mobile settings) , and want to use col-sm-?? instead , Based on Fredy31answer and you don't even need to define col-print-??. simply rewrite all col-md-?? css class definitions inside a: @media print { /* copy and paste from bootstrap.css*/ } like this:
如果您希望 Bootstrap 的网格不使用 col-xs (mobile settings) 打印，并且希望使用 col-sm-?? 相反，基于Fredy31 的答案，您甚至不需要定义 col-print-??。只需重写所有 col-md-?? css 类定义在一个：@media print { /* 从 bootstrap.css*/ 复制和粘贴，像这样：
@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%;
}
}
回答by MiCc83
The Sass version of Fredy31 solution:
Fredy31的Sass版解决方案：
@for $i from 1 through 12 {
.col-print-#{$i} {
width: #{percentage(round($i*8.33)/100)};
float: left;
}
}
回答by Dwza
Your switch styles like this
你的开关样式是这样的
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
See
看
#grid-example-mixedor #grid-example-mixed-complete
#grid-example-mixed或#grid-example-mixed-complete
and may you need to clearfix
你可能需要清除
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
Edit: 04/2019
编辑：04/2019
Since Bootstrap 4.x there are new classes that can be used to set the display behavior when printing. SEE 4.3 Docs
自 Bootstrap 4.x 起，有新的类可用于设置打印时的显示行为。见 4.3 文档
回答by Rui Caramalho
For Bootstrap 4 (using SASS)
对于 Bootstrap 4（使用 SASS）
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@for $i from 1 through $grid-columns {
@media print {
.col-print#{$infix}-#{$i} {
@include make-col($i, $grid-columns);
}
}
}
}
}
will create
会创造
@media print {
.col-print-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%; } }
@media print {
.col-print-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%; } }
@media print {
.col-print-3 {
flex: 0 0 25%;
max-width: 25%; } }
@media print {
.col-print-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%; } }
@media print {
.col-print-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%; } }
@media print {
.col-print-6 {
flex: 0 0 50%;
max-width: 50%; } }
@media print {
.col-print-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%; } }
@media print {
.col-print-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%; } }
@media print {
.col-print-9 {
flex: 0 0 75%;
max-width: 75%; } }
@media print {
.col-print-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%; } }
@media print {
.col-print-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%; } }
@media print {
.col-print-12 {
flex: 0 0 100%;
max-width: 100%; } }
回答by firepol
I had a similar problem, for me the easiest solution was to manually modify the width for elements I wanted to appear differently when printed (and I added a specific class -in my case: title-container, details-container for those, along the col-xs-6 etc.).
我有一个类似的问题，对我来说，最简单的解决方案是手动修改我希望在打印时显示不同的元素的宽度（并且我添加了一个特定的类 - 在我的情况下：标题容器，细节容器，沿着col-xs-6 等）。
For example:
例如：
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-3 col-sm-6 col-md-6 title-container">
Some stuff
</div>
<div class="col-xs-12 col-ms-9 col-sm-6 col-md-6 details-container">
Some more stuff
</div>
</div>
</div>
</div>
@media print {
.title-container {
width: 360px;
float: left;
}
.details-container {
width: 300px;
float: right;
}
}
In my case I needed a column to be floated on the right, one to the left, thus the floats... You could set in your custom css the width also for .col-xs-6etc. just a quick and dirty solution, but did the job for a page where I needed this...
在我的情况下，我需要在右侧浮动一列，向左浮动，因此浮动...您可以在自定义 css 中设置宽度也为.col-xs-6等。只是一个快速而肮脏的解决方案，但是在我需要这个的页面上完成了这项工作......
回答by kspearrin
The following works great to create grid elements specific for print media. Using Bootstrap 3.
以下非常适合创建特定于打印媒体的网格元素。使用引导程序 3。
@media print {
.make-grid(print);
}
Then you can use all the grid col elements with the printkeyword. Ex: col-print-6col-print-offset-2, etc.
然后你可以使用所有带有print关键字的网格 col 元素。例如：col-print-6col-print-offset-2等。
回答by Edgar
Maybe you could use Bootstrap 2. If you are familiar with Bootstrap 2, then you can use it as an alternative, as this offers non responsive CSS. Bootstrap 2 was not mobile first, you had to add an extra style sheet to make your web pages responsive.
也许您可以使用 Bootstrap 2。如果您熟悉 Bootstrap 2，那么您可以将其用作替代方案，因为它提供了非响应式 CSS。Bootstrap 2 首先不是移动设备，您必须添加额外的样式表才能使您的网页具有响应性。
Or you can add clearfixes for the mobile part. See http://getbootstrap.com/css/#grid-responsive-resets
或者您可以为移动部分添加清除修复。请参阅http://getbootstrap.com/css/#grid-responsive-resets
回答by William Schroeder McKinley
And the SASS version of Ehsan Abidi's answer using MiCc83's answer:
Ehsan Abidi 的 SASS 版本使用 MiCc83 的答案：
@for $i from 1 through 12 {
.col-sm-#{$i} {
width: #{percentage(round($i*8.33)/100)};
float: left;
}
}
I prefer this because I always spec the "sm" size and that most closely approximates a print page in my applications. Then I only need to add something specifically for print when I've got an outlier condition.
我更喜欢这个，因为我总是指定“sm”大小，并且最接近我的应用程序中的打印页面。然后，当我遇到异常情况时，我只需要添加一些专门用于打印的内容。
回答by seflix
If you only have 2 columns, you can try it. I fixed it with the code below.
如果你只有2列，你可以试试。我用下面的代码修复了它。
<div class="row">
<div class="w-50 p-3 float-left">
</div>
<div class="w-50 p-3 float-right">
</div>
</div>
