我对新的Bootstrap中的网格系统感到困惑，特别是这些类:
col-lg-*
col-md-*
col-xs-*
(其中*表示某个数字)。
有人能解释一下吗?
这个数字是如何对齐网格的? 如何使用这些数字? 它们到底代表什么?
当前回答
来自Twitter Bootstrap文档:
小网格(≥768px) = .col-sm-*， 中网格(≥992px) = .col-md-*， 大网格(≥1200px) = .col-lg-*。
阅读更多…
其他回答
来自Twitter Bootstrap文档:
小网格(≥768px) = .col-sm-*， 中网格(≥992px) = .col-md-*， 大网格(≥1200px) = .col-lg-*。
阅读更多…
主要观点是:
Col-lg -* col-md-* col-xs-* col-sm定义在这些不同的屏幕尺寸中有多少列。
例如:如果你想在桌面屏幕和手机屏幕上有两列，你可以在你的列中放两个col-md-6和两个col-xs-6类。
如果你想在桌面屏幕上有两列，而在电话屏幕上只有一列(即两行堆叠在一起)，你可以在你的列中放两个col-md-6和两个col-xs-12，因为总和将是24，它们将自动堆叠在一起，或者只是把xs样式去掉。
Bootstrap网格系统有四个类: Xs(手机) Sm(药片) Md(用于台式机) Lg(适用于较大的台式机) 上面的类可以组合起来创建更动态和灵活的布局。 提示:每个类都会缩放，因此如果您希望为 x和sm，你只需要指定Xs。
好吧，答案很简单，但请继续阅读:
Col-lg -表示列大≥1200px Col-md -列介质≥992px coll -xs-表示列特小≥768px
像素数字是断点，例如，当窗口小于768px(可能是移动设备)时，colx -xs将目标元素…
我还创建了下面的图像来展示网格系统是如何工作的，在这个例子中，我使用了3个，比如coll -lg-6来展示页面中的网格系统是如何工作的，看看lg, md和xs是如何响应窗口大小的:
只适用于引导3。
现在先忽略字母(xs, sm, md, lg)，我只从数字开始…
数字(1-12)表示任何div的总宽度的一部分 所有的div被分为12个列 因此，col-*-6跨越12列中的6列(宽度的一半)，col-*-12跨越12列中的12列(整个宽度)，等等
所以，如果你想要两个相等的列张成一个div，写
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
或者，如果你想让三个不相等的列跨度相同的宽度，你可以这样写:
<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>
您会注意到列的#加起来总是12。它可以小于12，但如果超过12，要小心，因为你的冒犯divs会撞到下一排(不是。row，这完全是另一个故事)。
你也可以在列中嵌套列(最好使用.row包装器)，比如:
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">Column 1-a</div>
<div class="col-xs-8">Column 1-b</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">Column 2-a</div>
<div class="col-xs-10">Column 2-b</div>
</div>
</div>
注意:由于每个.col类的两边都有15px的填充，所以你通常应该将嵌套的列包装在一个.row中，它的边距为-15px。这避免了重复填充，并保持嵌套和非嵌套col类之间的内容对齐。
你没有特别问xs, sm, md, lg的用法，但是它们是紧密相关的，所以我不得不提到它…
简而言之，它们被用来定义类应该应用在哪个屏幕大小:
Xs =超小屏幕(移动电话) 小屏幕(平板电脑) Md =中等屏幕(一些台式机) Lg =大屏幕(剩余的台式电脑)
阅读“网格” 选项” 有关更多详细信息，请参阅官方Bootstrap文档中的章节。
您通常应该使用多个列类对div进行分类，以便它根据屏幕大小表现不同(这是使引导响应的核心)。例如:具有col-xs-6和col-sm-4类的div将横跨手机(xs)的一半屏幕和平板电脑(sm)的1/3屏幕。
<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->
注意:根据下面的评论，给定屏幕大小的网格类适用于该屏幕大小或更大的屏幕，除非另一个声明覆盖它(即col-xs-6 col-md-4在xs和sm上横跨6列，在md和lg上横跨4列，即使sm和lg从未显式声明)
注意:如果你没有定义xs，它将默认为col-sm- 12(即在sm, md和lg屏幕上，col-sm-6是宽度的一半，但在xs屏幕上是全宽度)。
注意:如果你的.row包含超过12个cols，这实际上是完全没问题的，只要你知道它们会如何反应。这是一个有争议的问题，并不是每个人都同意。
给你
Col-lg-2:如果屏幕很大(lg)，那么这个组件将占用2个元素的空间，考虑到整行可以容纳12个元素(所以你会看到在大屏幕上这个组件占用一行16%的空间)
Col-lg-6:如果屏幕很大(lg)，那么该组件将占用6个元素的空间，考虑到整行可以容纳12个元素——当应用时，你会看到该组件占用了行中一半的可用空间。
上述规则仅适用于屏幕较大的情况。当屏幕很小时，该规则将被丢弃，每行只显示一个组件。
下图显示了不同尺寸的屏幕宽度:
