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

Question

Twitter Bootstrap 3 是否提供了一种通过向网格容器添加 css 类来“模拟”较小屏幕的内置方法？

我的用例是我想在大屏幕上通常使用引导程序的网格显示一段 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网格定义显示列，即使它在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