css - Bootstrap "col-md-4","col-xs-1", "col-lg-2"中数字的含义

Question

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

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

(其中 * 代表一些数字)。

谁能解释一下:

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

Answer 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 的填充，你通常应该将嵌套的列包装在一个 .row 中，它有 -15px边距。这避免了重复填充并使内容在嵌套和非嵌套的 col 类之间对齐。

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

简而言之，它们用于定义该类应适用于哪个屏幕尺寸:

• xs = 超小屏幕(手机)
• sm = 小屏幕(平板电脑)
• md = 中等屏幕(一些桌面)
• lg = 大屏幕(剩余桌面)

Read the "Grid Options" chapter from the official Bootstrap documentation for more details.

您应该通常使用多个列类对 div 进行分类，以便它根据屏幕尺寸表现不同(这是使 bootstrap 响应的核心)。例如:一个类为 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 在 xs 和 sm 上跨越 6 列，在 md< 上跨越 4 列 和 lg，即使 sm 和 lg 从未明确声明)

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

注意:如果您的 .row 包含超过 12 个列，实际上完全没问题，只要您知道它们的 react 即可。 --这是一个有争议的问题，并非所有人都同意。