Question

Twitter Bootstrap 3是否提供内置方式来模拟＆＃34;通过向网格容器添加css类来缩小屏幕？

我的用例是我希望通常在大屏幕上使用bootstrap网格显示html的一部分，但我想重复使用相同的片段以模式显示（更窄）。例如，假设我有这个html：

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-12">One</div>
        <div class="col-md-6 col-sm-12">Two</div>
    </div>
</div>

是否有我可以添加到.container元素的内置类（如.simulate-sm），以强制使用sm网格定义显示列，即使它是＆＃39 ;在md屏幕上？上面的html只是一个例子：我的真实世界的html有大量的行和更多不同的列组合，这让我对尝试单独按下列类犹豫不决。

感谢您的帮助！

Answer 1

没有内置任何内容，但使用正确的CSS（包括后代类），您可以使一个添加的自定义类为您完成所有工作。在您的具体示例中，您可以将.simulate-sm添加到.modal-body div中，如下所示：

<div class="modal-body simulate-sm">      
    <div class="col-md-6 col-sm-12">One</div>
....

和一些自定义CSS：

.simulate-sm .col-sm-12{width:100%}
.simulate-sm .col-sm-8{width:75%}
.simulate-sm .col-sm-6{width:50%}
.simulate-sm .col-sm-4{width:25%} /* extrapolate as needed */

对于您在原始代码中使用的任何列类执行此操作，执行基本数学计算以确定％宽度。（即与Bootstrap相同）。

后代特异性的组合和在模态体上使用它意味着它只在一个模态（你已经添加了.simulate- *类）中覆盖Bootstrap的样式。

以下是一个示例：http://www.bootply.com/KhNbrdUzoE

Answer 2

我无法直观地表达您的问题，而且我自己也从未这样做过，但我觉得文档中的这段代码与您的需求相关：

网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，将任何.col-md-类应用于元素不仅会影响其在中型设备上的样式，而且如果不存在.col-lg-类，也会影响大型设备。

如果删除col-md-6类定义，听起来col-sm-12定义将对所有等于或大于小屏幕的形状因子生效。

如果答案无关紧要，请道歉。在黑暗中是一个完整的镜头。

Answer 3

如果您希望模拟移动设备上的外观，大多数浏览器都有模拟器。例如，在chrome中，您将检查元素，并且控制台附近的底部有一个模拟器选项。在模拟屏幕方面＆＃34;更大＆＃34;比你的网站允许你从不同的分辨率查看你的网页。通过快速谷歌搜索，这里是一个模拟器：http://quirktools.com/screenfly/

Twitter引导网格：是否可以通过向容器添加类来模拟较小的屏幕？

3 个答案: