css - Twitter Bootstrap 网格 : is it possible to simulate smaller screen by adding class to container?

Question

Twitter Bootstrap 3 是否提供了一种内置的方式来通过向网格容器添加一个 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 网格定义，即使它在 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