设备大小和类前缀:

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

网格选项:

参考资料:网格系统

设备大小和类前缀:

超小型设备电话(<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%宽度。

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

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

例如，如果你从列开始: 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 

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