Twitter bootstrap 3 引导3。在一个元素中设置两列意味着什么？

我正在使用Bootstrap的网格系统，但是下面的例子让我很困惑。在下面的示例中，对于具有类形式组的每个div，有两个2列类-col-xs-5和col-lg-1

---

有人能解释为什么要这样做吗？

每个column类描述元素在指定断点处将占用多少列。例如：

<div class="form-group col-xs-5 col-lg-1 ">...</div>

如果页面以1200px的xs断点屏幕宽度呈现，则该元素将占据5列

---

这使您可以设置同一元素在不同屏幕宽度的显示。

对于每一行，您有一列

对于col-xs-5的超大中小型屏幕尺寸，它设置为五列宽；对于col-lg-1的大屏幕尺寸，它设置为一列宽。默认情况下，使用bootstrap，您可以设置四种不同的布局—超小、小、中、大，以适应不同的屏幕大小

如果将浏览器窗口的大小缩小，您将看到它的效果

有关网格系统如何工作的信息，请参见

---

尽管文档很好，但它很值得一读。参见

啊，是的。响应性设计。知道了。凉的

<div class="form-group col-xs-5 col-lg-1 ">...</div>