html – Bootstrap网格打印

发布时间：2020-12-14 21:29:16 所属栏目：资源来源：网络整理

导读：我想设计一个具有不同布局的报告页面，用于打印到移动设备。我使用的是bootstrap v3。似乎网格不能区分两者，因为打印的断点与移动(xs)的断点相同例如：在下面的测试html中，我的打印页面(或打印预览)显示xs6列并排显示，但sm6列堆叠。 xs和sm之间没有断点

我想设计一个具有不同布局的报告页面，用于打印到移动设备。我使用的是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来隐藏/显示仅在打印版本中的元素。

它仍然需要一些工作，但这个快速补丁帮助我很多。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!