引导网格进行打印 [英] Bootstrap grid for printing
问题描述
我想设计一个具有不同布局的报告页面，以便打印到移动设备上.我正在使用bootstrap v3.似乎网格无法在两者之间进行区分，因为打印的断点与移动(xs)的断点相同
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)
例如:在下面的测试html中，我的打印页面(或打印预览)并排显示xs6列，但sm6列堆叠在一起. xs和sm之间没有断点.
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.
我的打印页面肯定比移动视口宽，所以它不应该使用sm布局吗?
Surely my printed page is wider than my mobile viewport so shouldn't it use the sm layout?
我做错什么了吗?还是这样吗?是否有用于打印的定义的视口宽度?
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>
推荐答案
我所做的是在打印CSS中手动重新创建这些列类.
What I did was to manually recreate those columns classes in my print 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;}
然后，我只使用那些类，就像我使用引导程序类一样，使我的列仅用于打印.我还创建了.visible-print和.hidden-print来仅在打印版本中隐藏/显示元素.
Then I just use those classes like I use bootstrap classes to make my columns for print only. I also created .visible-print and .hidden-print to hide/show elements only in the print version.
它仍然需要一些工作，但是快速的补丁对我有很大帮助.
It still needs some work, but that quick patch helped me a lot.
这篇关于引导网格进行打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
