让我们简化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/

博士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%宽度。

它用来告诉引导程序根据屏幕大小在一行中要放置多少列

col-xs-2

在超大(xs)屏幕上，一行只显示2列，就像sm定义的小屏幕一样，md(中等尺寸)，lg(大尺寸)， 但是根据自举法则，如果你提到

xs-col-2 md-col-4

然后，对于屏幕大小从xs到sm(包括)的每一行将显示2列，以及当它获得下一个大小时的变化，即对于md到lg(包括) 为了更好地理解屏幕大小，尝试在chrome的开发者模式(ctr+shift+i)中以各种屏幕模式运行它们，并尝试各种像素或设备

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

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

例如，如果你从列开始: 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时，列将变成水平的。

我认为令人困惑的是，BootStrap 3是一个移动优先响应系统，并且没有在BootStrap文档的那部分解释这是如何影响col-xx-n层次结构的。 这使您想知道如果为较大的设备选择一个值，在较小的设备上会发生什么，并使您想知道是否需要指定多个值。(你不)

我想通过声明……来澄清这一点。 低颗粒类型(xs, sm)试图在较小的屏幕上保留布局外观，而较大类型(md,lg)将仅在较大的屏幕上正确显示，但将在较小的设备上包装列。 前面示例中引用的值是指引导程序降低外观以适应可用屏幕属性的阈值。

What this means in practice is that if you make the columns col-xs-n then they will retain correct appearance even on very small screens, until the window drops to a size that is so restrictive that the page cannot be displayed correctly. This should mean that devices that have a width of 768px or less should show your table as you designed it rather than in degraded (single or wrapped column form). Obviously this still depends on the content of the columns and that's the whole point. If the page attempts to display multiple columns of large data, side by side on a small screen then the columns will naturally wrap in a horrible way if you did not account for it. Therefore, depending on the data within the columns you can decide the point at which the layout is sacificed to display the content adequately.

例如，如果你的页面包含三个colm -sm-n列，当页面宽度下降到992px以下时，bootstrap会将列包装成行。 这意味着数据仍然可见，但需要垂直滚动才能查看。如果你不希望你的布局降级，选择xs(只要你的数据可以充分显示在低分辨率设备上的三列)

如果数据的水平位置很重要，那么您应该尝试选择较低的粒度值来保留视觉性质。如果位置不太重要，但页面必须在所有设备上可见，则应该使用更高的值。

如果您选择col-lg-n，那么列将正确显示，直到屏幕宽度低于xs阈值1200px。

一个特殊的例子:在学习引导网格系统之前，确保浏览器缩放设置为100%(100%)。例如:如果屏幕分辨率是(1600px x 900px)，浏览器缩放是175%，那么“bootstrap-ped”元素将被堆叠。

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

铬变焦100%

浏览器100% -元素水平放置

铬变焦175%

浏览器175% -堆叠元素