问题描述

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

I am confused with the grid system in the new Bootstrap, particularly these classes:

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

(其中 * 表示某个数字).

(where * represents some number).

谁能解释一下:

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

1. How that number is aligning the grids?
2. How to use these numbers?
3. What they actually represent?

推荐答案

仅适用于 Bootstrap 3.

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

Ignoring the letters (xs, sm, md, lg) for now, I'll start with just the numbers...

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

• the numbers (1-12) represent a portion of the total width of any div
• all divs are divided into 12 columns
• so, col-*-6 spans 6 of 12 columns (half the width), col-*-12 spans 12 of 12 columns (the entire width), etc

所以，如果你想两个相等的列跨越一个 div，写

So, if you want two equal columns to span a div, write

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

或者，如果您希望三个不相等的列跨越相同的宽度，您可以这样写:

Or, if you want three unequal columns to span that same width, you could write:

<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，这完全是另一回事).

You'll notice the # of columns always add up to 12. It can be less than twelve, but beware if more than 12, as your offending divs will bump down to the next row (not .row, which is another story altogether).

您还可以在列中嵌套列，(最好在它们周围加上 .row 包装器)，例如:

You can also nest columns within columns, (best with a .row wrapper around them) such as:

<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 类之间的内容对齐.

Each set of nested divs also span up to 12 columns of their parent div. NOTE: Since each .col class has 15px padding on either side, you should usually wrap nested columns in a .row, which has -15px margins. This avoids duplicating the padding and keeps the content lined up between nested and non-nested col classes.

-- 你没有具体询问 xs, sm, md, lg 的用法，但是它们是齐头并进的，所以我忍不住要谈一谈……

-- You didn't specifically ask about the xs, sm, md, lg usage, but they go hand-in-hand so I can't help but touch on it...

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

In short, they are used to define at which screen size that class should apply:

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

• xs = extra small screens (mobile phones)
• sm = small screens (tablets)
• md = medium screens (some desktops)
• lg = large screens (remaining desktops)

阅读"网格选项"更多详细信息，请参阅官方 Bootstrap 文档中的章节.

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

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

You should usually classify a div using multiple column classes so it behaves differently depending on the screen size (this is the heart of what makes bootstrap responsive). eg: a div with classes col-xs-6 and col-sm-4 will span half the screen on the mobile phone (xs) and 1/3 of the screen on tablets(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 列/code> 和 lg，即使 sm 和 lg 从未明确声明)