我认为令人困惑的是，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。

我认为令人困惑的是，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。

更新2020…

引导5

在Bootstrap 5 (alpha)中有一个新的-xxl- size:

col-* - 0 （xs） col-sm-* - 576px 上校-MD-* - 768px col-lg-* - 992px col-xl-* - 1200px 嗡��

引导5网格演示

---

引导4

在Bootstrap 4中有一个新的-xl- size，请看这个演示。同时-xs-中缀也被删除了，所以最小的列就是col-1, col-2..col-12等等. .

col-* - 0 （xs） col-sm-* - 576px 上校-MD-* - 768px col-lg-* - 992px col-xl-* - 1200px

引导4网格演示

此外，Bootstrap 4还包括新的自动布局列。它们也有响应断点(col、col-sm、col-md等)，但没有定义%宽度。因此，自动布局列在行中填充的宽度相等。

---

引导3

Bootstrap 3网格分为4层(或“断点”)…

小号(适用于智能手机.col-xs-*) 小(用于片剂。col-sm-*) 中等(适用于笔记本电脑。col-md-*) Large(用于笔记本/台式机.col-lg-*)。

这些网格大小使您能够控制不同宽度上的网格行为。不同的层由CSS媒体查询控制。

在Bootstrap的12列网格中…

Col-sm-3在典型的小设备宽度(> 768像素)上是12列宽中的3列(25%)

Col-md-3在典型的中等设备宽度(> 992像素)上是12列宽中的3列(25%)

---

较小的层(xs, sm或md)还定义了较大屏幕宽度的大小。因此，对于所有层上相同大小的列，只需设置最小视口的宽度…

<div class="col-lg-3 col-md-3 col-sm-3">..</div>等于，

< div级= >“col-sm-3。< / div >

更大的层是隐含的。因为col-sm-3意味着在sm-and-up上有3个单位，除非特别被使用不同尺寸的更大的层覆盖。

Xs(默认)>被sm覆盖>被md覆盖>被lg覆盖

---

组合这些类以在不同的网格大小上使用更改列宽度。这将创建一个响应式布局。

<div class="col- md3 col-sm-6">..</div>

sm, md和lg网格都将垂直“堆叠”在小于768像素的屏幕/视口上。这就是xs网格的位置。使用colx -xs-*类的列将不会垂直堆叠，并在最小的屏幕上继续缩小。

使用这个演示来调整浏览器的大小，你会看到网格缩放效果。

---

This article explains more about how the Bootstrap grid

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

一个特殊的例子:在学习引导网格系统之前，确保浏览器缩放设置为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% -堆叠元素

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

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

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