Css TwitterBootstrapGrid：是否可以通过向容器添加类来模拟更小的屏幕？

TwitterBootstrap3是否提供了一种内置的方式，通过向网格容器添加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有大量的行和更多不同的列组合，这使得我在尝试单独处理列类时犹豫不决

---

谢谢你的帮助

我不能完全想象你的问题，我自己也从来没有这样做过，但我觉得文档中的这段代码与你的需求相关：

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

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

---

如果答案不相关，道歉。这完全是瞎猜。

如果你想在移动设备上模拟它的样子，大多数浏览器都有模拟器。例如，在chrome中，您可以检查一个元素，在控制台附近的底部有一个模拟器选项。在模拟比你的屏幕“大”的方面，有些网站允许你从不同的分辨率查看你的网页。通过快速的谷歌搜索，这里有一个模拟器：

没有内置任何东西，但是有了正确的CSS（包括子类），您可以让一个添加的自定义类为您完成所有工作。在您的特定示例中，您将向.modal body div添加.simulate sm，如下所示：

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

对原始代码中使用的任何列类执行此操作，并进行基本数学运算以计算出%width。（即与引导程序相同）

后代特异性和在模态体上使用此特性的组合意味着它仅在模态（您已向其添加了.simulate-*类）中覆盖引导的样式

---

这里有一个例子：

也许我遗漏了什么，但是你不能在你的例子中使用

col-lg-12

？不太可能。我希望

One

和

Two

在大屏幕上相邻显示，但堆叠在小屏幕上（使用开箱即用的网格很容易）。但我还希望能够向

.container

添加一个类，使

一个

和

两个

堆叠起来，即使在大屏幕上也是如此。我将对我的问题进行编辑以使其更清楚。请看这里，只需抓取RWDBookmarklet并放在链接栏上，它可以帮助您轻松地模拟较小的屏幕，这是您不想要的。模拟xs以强制xs，而不是sm。模拟sm以强制sm？假设是这样，我可以告诉你怎么做。。。但是它不是内置的：）ps-您也可以在没有自定义类的情况下，通过在所有自定义CSS中使用.modal body作为父级来实现这一点。但是你不能根据需要打开/关闭内容，所以看起来有点鲁莽…太好了！谢谢@Shawn，这回答了我的问题。

.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 */