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

【问题标题】：Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in BootstrapBootstrap 中“col-md-4”、“col-xs-1”、“col-lg-2”中数字的含义
【发布时间】：2014-08-02 06:46:38
【问题描述】：

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

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

（其中 * 表示某个数字）。

谁能解释一下：

这个数字如何对齐网格？
如何使用这些数字？
它们实际上代表什么？

【问题讨论】：

你会找到解释here。您可以根据需要在列中使用数字，但请确保同一行中所有列的数字之和必须等于 12

标签： css twitter-bootstrap twitter-bootstrap-3 grid

【解决方案1】：

仅适用于 Bootstrap 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 边距的.row 中。这样可以避免重复填充并保持嵌套和非嵌套 col 类之间的内容对齐。

-- 你没有特别询问xs, sm, md, lg 的用法，但它们是相辅相成的，所以我忍不住要谈一谈……

简而言之，它们用于定义该类应适用的屏幕尺寸：

xs = 超小屏幕（手机）
sm = 小屏幕（平板电脑）
md = 中等屏幕（某些桌面）
lg = 大屏幕（剩余桌面）

阅读"Grid Options" 更多详细信息，请参阅官方 Bootstrap 文档中的章节。

您应该通常使用多个列类对 div 进行分类，以便它的行为根据屏幕大小而有所不同（这是引导程序响应的核心）。例如：具有col-xs-6 和col-sm-4 类的div 将跨越手机屏幕的一半（xs）和平板电脑屏幕的1/3（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 跨越 6 xs 和sm上的列，以及md和lg上的4列，即使sm和lg从未明确声明过）

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

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

【讨论】：

另外值得注意的是，给定屏幕尺寸的网格类适用于尺寸和更大的屏幕，除非进一步覆盖。例如，.col-xs-2.col-sm-2.col-lg-7 等价于 .col-xs-2.col-lg-7
您需要更正您的示例关于嵌套。嵌套需要将一行插入到要嵌套其他列的列中。不添加行将导致您有双重填充。为了更好地理解这一点，请在此处查看我的答案中的图表：stackoverflow.com/questions/23899715/…
非常好的解释，谢谢。我喜欢将.cols 包裹在.row 中以避免和取消填充。我一直想知道为什么要使用 row 以及它有什么不同。
但在文档中，似乎 div 的总宽度超过了 12 个，“xs”最多为 18 个。请查看“混合：移动和桌面”部分，为什么会这样？ getbootstrap.com/docs/3.3/examples/grid
@Michel 看起来您误解了他们的文档。他们在那里显示了两个单独的 xs 选项 - 一个用于 12 列（全宽），一个用于 6 列（半角）。您会看到这些列还显示 lg-8 和 lg-4 - 它们向您显示的是它们将在大型显示器上跨越 8 列和 4 列（总宽度的 2/3 + 1/3），以及 12和 6（全宽 + 下一行的 1/2）在手机显示屏上。希望有帮助！

【解决方案2】：

Bootstrap 网格系统有四个类：
xs（用于手机）
sm（用于平板电脑）
md（适用于台式机）
lg（适用于较大的桌面）

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

提示：每个类都会按比例放大，因此如果您希望为 xs和sm，只需要指定xs即可。

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

col-lg- 代表列大 ≥ 1200px
col-md- 代表列中 ≥ 992px
col- xs- 代表列特小≥ 768px

像素数是断点，例如col-xs 是在窗口小于768px（可能是移动设备）时定位元素...

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

【讨论】：

col-xs-* 已在 Bootstrap 4 中被删除，取而代之的是 col-*
您能分享一下 HTML（可能还有任何 CSS）吗？谢谢。

【解决方案3】：

给你

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

col-lg-6 ：如果屏幕很大 (lg)，那么考虑到整行可以容纳 12 个元素，该组件将占用 6 个元素的空间 -- 当应用您将看到该组件已占用行中可用空间的一半。

上述规则仅在屏幕较大时应用。当屏幕很小时，该规则被丢弃，每行只显示一个组件。

下图显示了各种屏幕尺寸宽度：

【讨论】：

【解决方案4】：

来自Twitter Bootstrap documentation：

小网格（≥768px）=.col-sm-*,
中等网格（≥ 992px）=.col-md-*,
大网格（≥ 1200px）=.col-lg-*.

to Read More...

【讨论】：

【解决方案5】：

重点是这样的：

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

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

如果您希望在桌面屏幕中有两列，而在手机屏幕中只有一列（即两行堆叠在一起），您可以在列中添加two col-md-6 和两列col-xs-12，因为总和将是24 它们会自动堆叠在一起，或者将xs 样式排除在外。

【讨论】：