仅适用于引导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，请小心，因为您的违规div将向下碰撞到下一行（而不是.row，这是另一回事）。
您还可以在列中嵌套列，（最好使用.row Package 器），例如：

<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类的每一侧都有15 px的填充，所以通常应该将嵌套列 Package 在.row中，.row的边距为-15px。这样可以避免重复填充，并保持嵌套和非嵌套col类之间的内容对齐。

--您没有特别询问xs, sm, md, lg的使用情况，但它们是密切相关的，所以我不得不提及它...
简而言之，它们用于定义该类别应适用的 * 屏幕大小 *：

*xs= * 超小屏幕 *（移动的电话）
*sm= * 小屏幕 *（平板电脑）
*md= * 中等屏幕 *（某些台式机）
*lg= * 大屏幕 *（剩余台式机）

有关详细信息，请阅读官方Bootstrap文档中的“网格选项”一章。
您应该 * 通常 * 使用多个列类对div进行分类，以便它根据屏幕大小而表现不同（这是 Bootstrap 响应的核心）。例如：具有类X1 M7 N1 X和X1 M8 N1 X的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-xs-12（即col-sm-6在sm、md和lg屏幕上为宽度的一半，但在xs屏幕上为全宽）。
**注意：**如果您的.row包含超过12个cols，实际上完全没问题，只要您知道它们将如何React。--这是一个有争议的问题，并不是每个人都同意。

Bootstrap网格系统有四个类：

**xs（用于电话）

sm（片剂）
md（用于台式机）
lg（适用于较大的台式机）**
可以组合上面的类来创建更加动态和灵活的布局。

**提示：**每个类都是按比例放大的，所以如果您希望为xs和sm设置相同的宽度，您只需要指定xs。
**好吧，**答案很简单，但请继续读下去：
**col-lg-**代表大柱≥ 1200px
**col-md-**代表色谱柱介质≥ 992px
**col-xs-**代表超小型色谱柱≥ 768px

像素数是断点，因此，例如，当窗口小于768 px（可能是移动的设备）时，col-xs将以元素为目标...
我还创建了下面的图像来展示网格系统是如何工作的，在这个例子中，我将它们与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-*。

to Read More...

"给你"
col-lg-2：如果屏幕很大（lg），则考虑到整行可以容纳12个元素，该组件将占用2个元素的空间（因此您将看到，在大屏幕上，该组件占用一行的16%空间）
col-lg-6：如果屏幕很大（lg），那么考虑到整行可以容纳12个元素，该组件将占用6个元素的空间--当应用时，您将看到该组件占用了行中一半的可用空间。
上述规则仅在屏幕较大时适用。当屏幕较小时，此规则将被丢弃，每行仅显示一个组件。
下图显示了各种屏幕尺寸宽度：

我能给出的最简单的一步一步的解释。
col-md-6表示：

• 放置该类的子元素，
• 将在其父元素中占用12个可用列中的 * 6个列 *，
• 当屏幕尺寸等于或大于≥ 768px（* 中等 * 尺寸屏幕）时。

记住在Bootstrap公式5.1中：

• 在他们的网格系统中有12列可用于每个元素。
• 在父元素中找到了这12列（正如预期的那样），子元素占用的列数与您要求它占用的列数相同（在本例中为6列）。

在您的代码中，您可以看到类似这样的内容：

<div class="row" id="parent">
    <div class="col-12 col-md-6" id="child">
        Content.
    </div>
</div>

col-12将使子进程占用父进程中所有可用的列，当视口大小低于给定的中等屏幕大小768px时
链接：

• Grid system
• Breakpoints