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

col-xs-2

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

xs-col-2 md-col-4

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

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

更新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%宽度。

设备大小和类前缀:

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

网格选项:

参考资料:网格系统

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

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

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