引导文档确实解释了这一点，但我还是花了一段时间才弄懂。当我用以下两种方式之一向自己解释时，它更有意义:

如果您认为列从水平开始，那么您可以选择何时希望它们堆叠。

例如，如果你从列开始: A b c

你决定什么时候把它们堆成这样:

A

B

C

如果你选择col-lg，那么当宽度< 1200px时，列将堆叠。

如果你选择col-md，那么当宽度< 992px时，列将堆叠。

如果你选择colm -sm，那么当宽度< 768px时，列将会叠加。

如果你选择colx，那么列永远不会叠加。

另一方面，如果你认为这些列一开始是堆叠的，那么你可以选择它们在什么时候变成水平的:

如果你选择colm -sm，那么当宽度为>= 768px时，列将变成水平的。

如果你选择col-md，那么当宽度为>= 992px时，列将变成水平的。

如果你选择col-lg，那么当宽度为>= 1200px时，列将变成水平的。

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

来自Twitter Bootstrap文档:

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

让我们简化Bootstrap!

请注意col-sm如何占用576px以下的100%宽度(换句话说，会转换为新行)，而col则不会。你可以注意到gif中顶部中心的当前宽度。

下面是代码:

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

默认情况下，Bootstrap以相同宽度对齐单行中的所有列(col)。在这种情况下，无论屏幕大小如何，三个col都将占用100%/3宽度。你可以在gif中注意到。

现在，如果我们想每行只渲染一列，即给每列100%的宽度，但只对较小的屏幕?现在是col-xx类!

我使用col-sm是因为我想把列分割成低于576px的独立行。这4个col-xx类由Bootstrap提供不同的显示设备，如手机，平板电脑，笔记本电脑，大型显示器等。

因此，col-sm会跌破576px, col-md会跌破768px, col-lg会跌破992px, col-xl会跌破1200px

注意，在bootstrap 4中没有colx -xs类。

这就是总结。你可以回去工作了。

---

但还有更多。现在是col-*和col-xx-*用于自定义宽度。

记得在上面的例子中，我提到col或col-xx在一行中取相同的宽度。如果我们想给一个特定的col更多的宽度，我们可以这样做。

引导行被分为12部分，所以在上面的例子中有3个col，所以每个都需要12/3 = 4部分。您可以将这些部件视为测量宽度的一种方法。

我们也可以用col-*即col-4的格式来写:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

它不会有什么不同，因为默认情况下bootstrap给col相同的宽度(4 + 4 + 4 = 12)。

但是，如果我们想给第一个col 7个部分，给第二个col 3个部分，剩下的2个部分(12-7-3 = 2)给第三个col(7+3+2，所以总数是12)，我们可以简单地这样做:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

您还可以自定义col-xx-*类的宽度。

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

它在行动中看起来如何?

如果col的和大于12呢?然后col将移动/调整到线下。是的，一行可以有任意数量的列!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

如果我们想在大屏幕上一行3列，但在小屏幕上将这些列分成2行，该怎么办?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

你可以在这里玩:https://jsfiddle.net/JerryGoyal/6vqno0Lm/

设备大小和类前缀:

超小型设备电话(<768px) - .col-xs- 小型设备片剂(≥768px) - .col-sm- 中型设备桌面(≥992px) - .col-md- 大型设备桌面(≥1200px) - .col-lg-

网格选项:

参考资料:网格系统

博士TL;

.col-X-Y表示在屏幕大小为X及以上时，拉伸该元素以填充Y列。

Bootstrap提供了每个.row包含12列的网格，因此Y=3表示宽度=25%。

Xs、sm、md、lg分别是智能手机、平板电脑、笔记本电脑、台式机的尺寸。

在不同的屏幕尺寸上指定不同的宽度是为了让你在更小的屏幕上做更大的东西。

例子

<div class="col-lg-6 col-xs-12">

含义:桌面50%宽度，手机、平板电脑和笔记本电脑100%宽度。