Bootstrap中“col-md-4”、“col-xs-1”、“col-lg-2”中数字的含义

Question

我对新引导中的网格系统感到困惑，尤其是这些类：

col-lg-*
col-md-*
col-xs-*

（其中*代表一些数字）。

请任何人解释一下：

1. 这个数字是如何对齐网格的
2. 如何使用这些数字
3. 它们实际上代表什么

Answer 1

要点是这样的：

col-lg-*col-md-*col-xs-*col-sm定义在这些不同的屏幕大小中将有多少列。

示例：如果希望在桌面屏幕和电话屏幕中有两列，请在列中放置两个col-md-6和两个col-xs-6类。

如果你想在桌面屏幕上有两列，而在电话屏幕上只有一列（即两行堆叠在一起），你可以在列中放置两列col-md-6和两列col-xs-12，因为总和是24，它们会自动堆叠在彼此的顶部，或者只保留xs样式。

Answer 2

引导网格系统有四类：
xs（用于手机）
sm（用于平板电脑）
md（用于台式机）
lg（用于大型台式机）

上面的类可以组合起来创建更动态、更灵活的布局。

提示：每个类都会向上扩展，因此如果希望为xs和sm设置相同的宽度，只需指定xs。

好的，答案很简单，但请继续阅读：

col lg-表示大的列≥ 1200px
col md-代表中柱≥ 992px
列xs-表示超小列≥ 768px

像素号是断点，所以例如col-xs在窗口小于768px（可能是移动设备）时瞄准元素...

我还创建了下面的图片来展示网格系统是如何工作的，在这个例子中，我将它们与3一起使用，比如col-lg-6来展示网格系统是如何在页面中工作的，看看lg，md和xs响应窗口大小：

Answer 3

仅适用于引导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，则要小心，因为您的违规div将跳到下一行（而不是.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>

每组嵌套的div也最多跨越其父div的12列。注意：因为每个。col类的两边都有15px的填充，您通常应该将嵌套列包装在中。行，其边距为-15px。这样可以避免重复填充，并使内容在嵌套和非嵌套col类之间保持对齐。

--您没有特别询问xs、sm、md、lg的使用情况，但它们是密切相关的，所以我忍不住要提及。。。

简而言之，它们用于定义该类应应用的屏幕大小：

• xs=超大屏幕（移动电话）
• sm=小屏幕（平板电脑）
• md=中等屏幕（某些台式机）
• lg=大屏幕（剩余桌面）

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

您通常应该使用多个列类对div进行分类，以便根据屏幕大小对其进行不同的行为（这是引导响应的核心）。例如：一个具有col-xs-6和col-sm-4类的div将覆盖移动电话（xs）屏幕的一半，平板电脑（sm）屏幕的三分之一。

<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-xs-12（即col-sm-6是sm，md和lg屏幕宽度的一半，但在xs屏幕上为全宽）。

注意：如果您的，实际上是完全没有问题的。行包括12个以上的COL，只要您知道它们将如何反应--这是一个有争议的问题，并非所有人都同意。