只适用于引导3。

现在先忽略字母(xs, sm, md, lg)，我只从数字开始…

数字(1-12)表示任何div的总宽度的一部分 所有的div被分为12个列 因此，col-*-6跨越12列中的6列(宽度的一半)，col-*-12跨越12列中的12列(整个宽度)，等等

所以，如果你想要两个相等的列张成一个div，写

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

或者，如果你想让三个不相等的列跨度相同的宽度，你可以这样写:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

您会注意到列的#加起来总是12。它可以小于12，但如果超过12，要小心，因为你的冒犯divs会撞到下一排(不是。row，这完全是另一个故事)。

你也可以在列中嵌套列(最好使用.row包装器)，比如:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

注意:由于每个.col类的两边都有15px的填充，所以你通常应该将嵌套的列包装在一个.row中，它的边距为-15px。这避免了重复填充，并保持嵌套和非嵌套col类之间的内容对齐。

你没有特别问xs, sm, md, lg的用法，但是它们是紧密相关的，所以我不得不提到它…

简而言之，它们被用来定义类应该应用在哪个屏幕大小:

Xs =超小屏幕(移动电话) 小屏幕(平板电脑) Md =中等屏幕(一些台式机) Lg =大屏幕(剩余的台式电脑)

阅读“网格” 选项” 有关更多详细信息，请参阅官方Bootstrap文档中的章节。

您通常应该使用多个列类对div进行分类，以便它根据屏幕大小表现不同(这是使引导响应的核心)。例如:具有col-xs-6和col-sm-4类的div将横跨手机(xs)的一半屏幕和平板电脑(sm)的1/3屏幕。

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

注意:根据下面的评论，给定屏幕大小的网格类适用于该屏幕大小或更大的屏幕，除非另一个声明覆盖它(即col-xs-6 col-md-4在xs和sm上横跨6列，在md和lg上横跨4列，即使sm和lg从未显式声明)

注意:如果你没有定义xs，它将默认为col-sm- 12(即在sm, md和lg屏幕上，col-sm-6是宽度的一半，但在xs屏幕上是全宽度)。

注意:如果你的.row包含超过12个cols，这实际上是完全没问题的，只要你知道它们会如何反应。这是一个有争议的问题，并不是每个人都同意。

主要观点是:

Col-lg -* col-md-* col-xs-* col-sm定义在这些不同的屏幕尺寸中有多少列。

例如:如果你想在桌面屏幕和手机屏幕上有两列，你可以在你的列中放两个col-md-6和两个col-xs-6类。

如果你想在桌面屏幕上有两列，而在电话屏幕上只有一列(即两行堆叠在一起)，你可以在你的列中放两个col-md-6和两个col-xs-12，因为总和将是24，它们将自动堆叠在一起，或者只是把xs样式去掉。

来自Twitter Bootstrap文档:

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

阅读更多…

Bootstrap网格系统有四个类: Xs(手机) Sm(药片) Md(用于台式机) Lg(适用于较大的台式机) 上面的类可以组合起来创建更动态和灵活的布局。 提示:每个类都会缩放，因此如果您希望为 x和sm，你只需要指定Xs。

好吧，答案很简单，但请继续阅读:

Col-lg -表示列大≥1200px Col-md -列介质≥992px coll -xs-表示列特小≥768px

像素数字是断点，例如，当窗口小于768px(可能是移动设备)时，colx -xs将目标元素…

我还创建了下面的图像来展示网格系统是如何工作的，在这个例子中，我使用了3个，比如coll -lg-6来展示页面中的网格系统是如何工作的，看看lg, md和xs是如何响应窗口大小的:

给你

Col-lg-2:如果屏幕很大(lg)，那么这个组件将占用2个元素的空间，考虑到整行可以容纳12个元素(所以你会看到在大屏幕上这个组件占用一行16%的空间)

Col-lg-6:如果屏幕很大(lg)，那么该组件将占用6个元素的空间，考虑到整行可以容纳12个元素——当应用时，你会看到该组件占用了行中一半的可用空间。

上述规则仅适用于屏幕较大的情况。当屏幕很小时，该规则将被丢弃，每行只显示一个组件。

下图显示了不同尺寸的屏幕宽度:

我能给出的最简单的解释。

Col-md-6表示:

放置这个类的子元素， 将在它的父元素中占据12列中的6列， 当屏幕大小等于或大于≥768px(中等尺寸屏幕)时。

记住在Bootstrap(5.1)中:

在他们的网格系统中，每个元素都有12列。 这12列是在父元素中找到的(正如预期的那样)，子元素占用的列数与您告诉它占用的列数相同(在本例中为6)。

在你的代码中，你可以看到这样的东西:

<div class="row" id="parent">
    <div class="col-12 col-md-6" id="child">
        Content.
    </div>
</div>

当视口大小低于给定的中等屏幕大小768px时，Col-12将使子元素占据父元素的所有可用列

链接:

网格系统 断点