Bootstrap中“ col-md-4”，“ col-xs-1”，“ col-lg-2”中数字的含义

我对新的Bootstrap中的网格系统感到困惑，尤其是这些类：

col-lg-*
col-md-*
col-xs-*

（其中*代表一些数字）。

任何人都可以解释以下内容：

1. 这个数字如何对齐网格？
2. 如何使用这些数字？
3. 什么他们实际上代表什么呢？

仅适用于Bootstrap 3。

忽略字母（X 小号，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，则您的冒犯的div会下降到下一行（不是.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>

每套嵌套的div最多也跨越其父div的12列。注意：由于每个.col类的两侧都有15px的填充，因此通常应将嵌套的列包装在.row具有-15px边距的中。这样可以避免重复填充，并使内容在嵌套和非嵌套col类之间保持一致。

-您没有具体询问xs, sm, md, lg使用情况，但是它们是紧密结合的，所以我不禁要碰一下...

简而言之，它们用于定义该类应采用的屏幕尺寸：

• xs = 超小屏幕（手机）
• sm = 小屏幕（平板电脑）
• md = 中型屏幕（某些台式机）
• lg = 大屏幕（其余台式机）

有关更多详细信息，请阅读官方Bootstrap文档中的“ 网格选项 ”一章。

通常，您应该使用多个列类对div进行分类，以便它的行为取决于屏幕大小（这是使Bootstrap响应的核心）。例如：使用类一个div col-xs-6和col-sm-4将跨越一半的移动电话上（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跨度6列xs 和sm，并在4列md 和lg，即使sm和lg从来没有明确宣布）

注意：如果你没有定义xs，将默认为col-xs-12（即col-sm-6一半的宽度sm，md并lg在屏幕上，但全宽xs屏幕）。

注意：如果您.row包括超过12个列，则实际上完全可以，只要您知道它们会如何反应即可。-这是一个有争议的问题，并非所有人都同意。

Bootstrap网格系统有四个类别：
xs（用于电话）
sm（用于平板电脑）
md（用于桌面）
lg（用于较大的桌面）

可以将上述类组合在一起以创建更多动态和灵活的布局。

提示：每个类都按比例增加，因此，如果您希望为xs和sm设置相同的宽度，则只需指定xs。

好的，答案很简单，但请继续阅读：

COL-LG-代表列大≥ 1200px
COL-MD-代表列中≥ 992px
COL-XS-代表列特小号≥ 768px

像素数是断点，因此例如col-xs在窗口小于768px时（可能是移动设备）以元素为目标。

我还创建了下面的图片显示了如何网格系统的工作原理，在这个例子我使用他们的3个，喜欢col-lg-6向你展示电网系统工作的页面，看看如何如何lg，md并xs响应窗口大小：

要点是：

col-lg-* col-md-* col-xs-* col-sm 定义在这些不同的屏幕尺寸中将有多少列。

示例：如果要在桌面屏幕和电话屏幕中有两列，请在这两列中放置两个col-md-6和两个col-xs-6类。

如果您希望在桌面屏幕上有两列，而在电话屏幕上只有一列（即，两行相互堆叠），那么您就放two col-md-6两col-xs-12列，因为总和为24，它们将自动堆叠在每一行的顶部其他，或者只保留xs样式。

从Twitter Bootstrap文档中：

• 小网格（≥768px）= .col-sm-*，
• 中格（≥992px）= .col-md-*，
• 大网格（≥1200px）= .col-lg-*。

阅读更多...

干得好

col-lg-2：如果屏幕很大（lg），则此组件将占用2个 元素的空间，因为整行可以容纳12个元​​素（因此，您将在大屏幕上看到此组件仅占行的16％的空间）

col-lg-6：如果屏幕很大（lg），则此组件将占用6的空间 元素的因为整行可以容纳12个元​​素-应用后，您将看到该组件占用了该行中一半的可用空间。

仅当屏幕较大时才应用以上规则。当屏幕较小时，此规则将被丢弃，并且每行仅显示一个组件。

下图显示了各种屏幕尺寸的宽度：