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

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

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

来自Twitter Bootstrap文档:

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

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

col-xs-2

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

xs-col-2 md-col-4

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

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