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

EN

仅适用于Bootstrap 3。

现在忽略字母(xs，sm，md，lg) __，我将从数字开始...

• 数字(1- 12 )表示任何div
• 的总宽度的一部分所有div被分成12列
• so，col-*-6跨越12列中的6列(宽度的一半)，col-*-12跨越12列中的12列(整个宽度)，依此类推<

>F213

因此，如果您希望两个相等的列跨越一个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边距的.row中。这避免了重复填充，并使内容在嵌套和非嵌套的col类之间排列。

--您没有特别询问xs, sm, md, lg的用法，但它们是密切相关的，所以我不禁要提及它……

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

• xs =超小屏幕(移动phones)
• sm =小屏幕(tablets)
• md =中屏(某些desktops)
• lg =大屏幕(剩余桌面)

阅读官方Bootstrap文档中的""章节，了解更多详细信息。

通常，您应该使用多个列类对div进行分类，以便根据屏幕大小(这是使bootstrap响应的核心)的不同行为。例如:带有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列，即使D63和D64从未显式声明)

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

备注：如果您的.row包含12个以上的cols，只要您知道它们将如何反应，实际上是完全没有问题的。--这是一个有争议的问题，并不是每个人都同意。

引导网格系统有四个类：

xs (适用于手机) sm (适用于平板电脑) md (适用于台式机) lg (适用于较大的台式机)

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

提示：每个类都会放大，所以如果你想为xs和sm设置相同的宽度，你只需要指定xs即可。

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

col lg-代表column large ≥ 1200px

col md-代表column medium ≥ 992px

col-xs-代表column extra small ≥ 768px

像素数是断点，例如，当窗口比768px(likely移动设备小时，col-xs以元素为目标)……

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

​

​

要点是这样的：

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

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

如果你想在桌面屏幕上有两列，而在手机屏幕上只有一列(即两行堆叠在一起)，你可以在你的列中放入two col-md-6和两个col-xs-12，因为sum将是24，所以它们将自动堆叠在一起，或者干脆省去xs样式。