我想设计一个具有不同布局的报告页面，用于打印到移动设备。我使用的是bootstrap 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>
解决方法
我所做的是在我的打印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来隐藏/显示仅在打印版本中的元素。
它仍然需要一些工作，但这个快速补丁帮助我很多。
