用于打印的 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>

原文由 Gordon Copestake 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 416

.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;}

@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%; } }

用于打印的 Bootstrap 网格

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译