用于打印的引导网格
Posted
技术标签:
【中文标题】用于打印的引导网格【英文标题】：Bootstrap grid for printing 【发布时间】：2014-04-07 14:38:16 【问题描述】：我想设计一个具有不同布局的报表页面以打印到移动设备。我正在使用引导程序 v3。似乎网格无法区分两者，因为打印的断点与移动 (xs) 的断点相同
例如：在下面的测试 html 中，我的打印页面（或打印预览）并排显示 xs6 列，但 sm6 列堆叠。 xs 和 sm 之间没有断点。
我的打印页面肯定比我的移动视口宽，所以它不应该使用 sm 布局吗？
是我做错了什么还是事情就是这样？是否有定义的打印视口宽度？
<!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>
【问题讨论】：
这个问题***.com/questions/320357/… 指出打印视口（A4 的）是 670 像素，这是我的问题所在。我的打印页面和我的移动样式之间存在冲突，因为它们都具有相似的视口大小。 【参考方案1】：我所做的是在我的打印 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-10width:83%; float:left;
.col-print-11width:92%; float:left;
.col-print-12width:100%; float:left;
然后我只使用这些类，就像我使用引导类一样，使我的列仅用于打印。我还创建了 .visible-print 和 .hidden-print 以仅在打印版本中隐藏/显示元素。
它仍然需要一些工作，但是那个快速的补丁对我帮助很大。
【讨论】：
我还必须使用您的解决方案将max-width 设置为与 Bootstrap 4 中的 width 相同。【参考方案2】：
如果您希望 Bootstrap 的网格不使用 col-xs（移动设置）打印，并且想使用 col-sm-??相反，基于 Fredy31 的回答，您甚至不需要定义 col-print-??。只需重写所有 col-md-?? a: @media print /* 从 bootstrap.css 复制和粘贴 */ 中的 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%;
【讨论】：
嗨，您在哪里添加此@media 打印数据。在 print.css 样式表中？ 嗨，在我的自定义 css 文件中，该文件有我自己的各种页面设置。【参考方案3】：Sass 版本的 Fredy31 解决方案：
@for $i from 1 through 12
.col-print-#$i
width: #percentage(round($i*8.33)/100);
float: left;
【讨论】：
正是我想要的！ 如何使用。 .【参考方案4】：对于 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);
将创造
@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%;
【讨论】：
【参考方案5】：你的开关样式是这样的
<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>
见
#grid-example-mixed 或 #grid-example-mixed-complete
你可能需要清除修复
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
#grid-responsive-resets
编辑：04/2019
自 Bootstrap 4.x 以来，有一些新类可用于设置打印时的显示行为。 SEE 4.3 Docs
【讨论】：
是的，但我的印刷版总是使用 xs 风格，这让我的手机风格变得很糟糕 但是在你的帖子中你有两行不同的网格，但是如果你想让它响应你必须给行你需要的所有类型:) 也许我举了一个不好的例子。我正在尝试确保我的打印页面使用与我的移动版本不同的样式。两者似乎都想使用 col-xs-# 版本 那不是问题。让我试着解释一下：如果我有两列并排，我希望它们并排打印，但在移动设备上显示堆叠。我可以使用 col-xs-6 强制打印两列，但这也强制它们在移动设备中并排，这意味着它们重叠。如果我用 col-xs-12 强制它们堆叠在移动设备上，即使它们并排有足够的空间，它们也会堆叠打印。 col-sm-* 没有效果，因为视口太小而无法生效。 我测试过的所有人，Firefox、Chrome、IE11【参考方案6】：我遇到了类似的问题，对我来说，最简单的解决方案是手动修改我希望在打印时以不同方式显示的元素的宽度（并且我添加了一个特定的类 - 在我的情况下：标题容器、详细信息容器，沿 col-xs-6 等）。
例如：
<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;
在我的情况下，我需要一个列在右侧浮动，一个在左侧，因此浮动... 您也可以在自定义 css 中为 .col-xs-6 等设置宽度>
【讨论】：
我见过的最好的解决方案，虽然仍然不理想！ 是的，我刚刚做了类似的事情。我知道这很骇人听闻，但我有一个 col-xs-2 / col-xs-10 的东西。我在我的@media print .hide_element_for_print display:none 中创建了一个类，并在需要的地方使用（如 col-xs-2）并更改了 .col-xs-10 width:100% 的定义。这使我可以隐藏左侧导航并打印整个页面宽度的主要内容区域。【参考方案7】：不要使用 .col-print-1 、 .col-print-2 等新列名重新创建，而是编写一个媒体查询，该查询将在打印文档时启用。
@media print
.col-md-1,.col-md-2,.col-md-3,.col-md-4,
.col-md-5,.col-md-6,.col-md-7,.col-md-8,
.col-md-9,.col-md-10,.col-md-11,.col-md-12
float: left;
.col-md-1
width: 8%;
.col-md-2
width: 16%;
.col-md-3
width: 25%;
.col-md-4
width: 33%;
.col-md-5
width: 42%;
.col-md-6
width: 50%;
.col-md-7
width: 58%;
.col-md-8
width: 66%;
.col-md-9
width: 75%;
.col-md-10
width: 83%;
.col-md-11
width: 92%;
.col-md-12
width: 100%;
所以通过这种方式，我们可以直接应用打印 css 样式，而无需更改列名。
【讨论】：
【参考方案8】：以下内容非常适合创建特定于印刷媒体的网格元素。使用引导程序 3。
@media print
.make-grid(print);
然后您可以使用所有带有print 关键字的网格列元素。例如：col-print-6col-print-offset-2等
【讨论】：
【参考方案9】：也许您可以使用 Bootstrap 2。如果您熟悉 Bootstrap 2，那么您可以使用它作为替代方案，因为它提供了非响应式 CSS。 Bootstrap 2 首先不是移动设备，您必须添加额外的样式表才能使您的网页具有响应性。
或者您可以为移动部分添加 clearfixes。见http://getbootstrap.com/css/#grid-responsive-resets
【讨论】：
虽然 BS2 可能是一个解决方案，但我宁愿向前看也不要向后看【参考方案10】：以及使用 MiCc83 答案的 Ehsan Abidi 答案的 SASS 版本：
@for $i from 1 through 12
.col-sm-#$i
width: #percentage(round($i*8.33)/100);
float: left;
我更喜欢这个，因为我总是指定“sm”大小，并且最接近我的应用程序中的打印页面。然后我只需要在遇到异常情况时添加一些专门用于打印的内容。
【讨论】：
【参考方案11】：如果你只有2列，你可以试试。我用下面的代码修复了它。
<div class="row">
<div class="w-50 p-3 float-left">
</div>
<div class="w-50 p-3 float-right">
</div>
</div>
【讨论】：
【参考方案12】：如果只是两列中的一行文本，您可以使用已接受的答案here。
【讨论】：
【参考方案13】：对于 Bootstrap 4，这里有一些我在多个项目中应用的 sn-ps。这些正在调整：
网格（遵循 LG 断点） 间隔符（重写所有低于 LG 边距/填充） 按钮（由于背景颜色在打印预览中不起作用，请将填充按钮切换为轮廓） 显示器（重写所有以下 LG 显示器） 文本对齐方式（在 LG 断点下方全部重写） @media print
$grid-breakpoints-print: (lg: 992px); // keep breakpoint that you would like to apply for print
/* Rewrite margins, padding, display & alignment to keep the LG and not the mobile ones */
@each $breakpoint in map-keys($grid-breakpoints-print)
$infix: breakpoint-infix($breakpoint, $grid-breakpoints-print);
// rewrite all displays for your print breakpoint
@each $value in $displays
.d#$infix-#$value
display: $value !important;
@each $v in $displays
&.d-#$v
display: $value !important;
&.d-print-none,
&.table__sort
display: none !important;
&.d-print-none
display: none !important;
// rewrite all spacings for your print breakpoint
@each $prop, $abbrev in (margin: m, padding: p)
@each $size, $length in $spacers
.#$abbrev#$infix-#$size
#$prop: $length !important;
@each $s, $l in $spacers
&.#$abbrev-#$s,
&.#$abbrev-auto
#$prop: $length !important;
.#$abbrevt#$infix-#$size,
.#$abbrevy#$infix-#$size
#$prop-top: $length !important;
@each $s, $l in $spacers
&.#$abbrevt-#$s,
&.#$abbrevy-#$s,
&.#$abbrevt-auto,
&.#$abbrevy-auto
#$prop-top: $length !important;
.#$abbrevr#$infix-#$size,
.#$abbrevx#$infix-#$size
#$prop-right: $length !important;
@each $s, $l in $spacers
&.#$abbrevr-#$s,
&.#$abbrevx-#$s,
&.#$abbrevr-auto,
&.#$abbrevx-auto
#$prop-right: $length !important;
.#$abbrevb#$infix-#$size,
.#$abbrevy#$infix-#$size
#$prop-bottom: $length !important;
@each $s, $l in $spacers
&.#$abbrevb-#$s,
&.#$abbrevy-#$s,
&.#$abbrevb-auto,
&.#$abbrevy-auto
#$prop-bottom: $length !important;
.#$abbrevl#$infix-#$size,
.#$abbrevx#$infix-#$size
#$prop-left: $length !important;
@each $s, $l in $spacers
&.#$abbrevl-#$s,
&.#$abbrevx-#$s,
&.#$abbrevl-auto,
&.#$abbrevx-auto
#$prop-left: $length !important;
// rewrite all text alignments for your print breakpoint
.text#$infix-left
text-align: left !important;
&.text-left,
&.text-right,
&.text-center
text-align: left !important;
.text#$infix-right
text-align: right !important;
&.text-left,
&.text-right,
&.text-center
text-align: right !important;
.text#$infix-center
text-align: center !important;
&.text-left,
&.text-right,
&.text-center
text-align: center !important;
/* Rewrite grid to keep the LG and discard the mobile */
@for $i from 1 through 12
.col-lg-#$i
flex: 0 0 #percentage(round($i*8.33)/100) !important;
max-width: #percentage(round($i*8.33)/100) !important;
@for $k from 1 through 12
&.col-xs-#$k,
&.col-sm-#$k,
&.col-md-#$k,
&.col-#$k
flex: 0 0 #percentage(round($i*8.33)/100) !important;
max-width: #percentage(round($i*8.33)/100) !important;
/* Since the print will not fill background-colors you need to transform filled buttons into outline */
@each $color, $value in $theme-colors
.btn-#$color
color: $value !important;
background-color: $white !important;
这是一个有效的 Fiddle。请记住，只有 @media print ... 在小提琴示例中很重要。变量从一开始就被复制到有一个工作小提琴。
【讨论】：
以上是关于用于打印的引导网格的主要内容，如果未能解决你的问题，请参考以下文章