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

Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap

提问by Bravo

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

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

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

(where * represents some number).

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

Can anyone please explain the following:

任何人都可以请解释以下内容：

1. Howthat number is aligning the grids?
2. Howto use these numbers?
3. Whatthey actually represent?

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

回答by Shawn Taylor

Applies to Bootstrap 3 only.

仅适用于 Bootstrap 3。

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

忽略字母（X小号，SM，MD，LG）现在，我只用数字开始...

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

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

So, if you want two equal columnsto span a div, write

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

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

Or, if you want three unequal columnsto 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>

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).

您会注意到列数总是​​加起来为 12。它可能小于 12，但要注意如果超过 12，因为您的违规 div 将下降到下一行（不是.row，这完全是另一回事）。

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

您还可以在列中嵌套列（最好.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>

Each set of nested divs also span up to 12 columns of their parent div. NOTE:Since each .colclass 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.

每组嵌套 div 也最多跨越其父 div 的 12 列。注意：由于每个.col类的两边都有 15px 的填充，您通常应该将嵌套列包裹在 a 中.row，它的边距为 -15px。这避免了重复填充并使内容在嵌套和非嵌套 col 类之间排列。

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

-- 你没有具体问xs, sm, md, lg用法，但它们齐头并进，所以我不禁触及它......

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

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

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

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

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

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

You should usuallyclassify 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-6and col-sm-4will span half the screen on the mobile phone (xs) and 1/3 of the screen on tablets(sm).

您通常应该使用多个列类对 div 进行分类，这样它的行为会根据屏幕大小而有所不同（这是使引导程序响应的核心）。例如：使用类一个divcol-xs-6和col-sm-4将跨越一半的移动电话上（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 -->

NOTE:as per comment below, grid classes for a given screen size apply to that screen size and largerunless another declaration overrides it (i.e. col-xs-6 col-md-4spans 6 columns on xsand sm, and 4 columns on mdand lg, even though smand lgwere never explicitly declared)

注意：根据下面的评论，给定屏幕尺寸的网格类适用于该屏幕尺寸和更大的屏幕尺寸，除非另一个声明覆盖它（即col-xs-6 col-md-4跨越 6 列 on xsandsm和 4 列 on mdandlg，即使sm和lg从未明确声明）

NOTE:if you don't define xs, it will default to col-xs-12(i.e. col-sm-6is half the width on sm, mdand lgscreens, but full-width on xsscreens).

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

NOTE:it's actually totally fine if your .rowincludes more than 12 cols, as long as you are aware of how they will react. --This is a contentious issue, and not everyone agrees.

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

回答by Alireza

The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

Tip:Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.

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

可以组合上述类以创建更动态和灵活的布局。

提示：每个类都按比例放大，因此如果您希望为 xs 和 sm 设置相同的宽度，则只需指定 xs。

OK,the answer is easy, but read on:

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

col-lg-stands for column large ≥ 1200px
col-md-stands for column medium ≥ 992px
col-xs-stands for column extra small ≥ 768px

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

The pixel numbers are the breakpoints, so for example col-xsis targeting the element when the window is smaller than 768px(likely mobile devices)...

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

I also created the image below to show how the grid system works, in this examples I use them with 3, like col-lg-6to show you how the grid system work in the page, look at how lg, mdand xsare responsive to the window size:

我还创建了下面的图片显示了如何网格系统的工作原理，在这个例子我使用他们的3个，喜欢col-lg-6向你展示电网系统工作的页面，看看如何如何lg，md并xs响应窗口大小：

回答by Tone ?koda

The main point is this:

主要观点是这样的：

col-lg-*col-md-*col-xs-*col-smdefine how many columns will there be in these different screen sizes.

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

Example: if you want there to be two columns in desktop screens and in phone screens you put two col-md-6and two col-xs-6classes in your columns.

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

If you want there to be two columns in desktop screens and only one column in phone screens (ie two rows stacked on top of each other) you put two col-md-6and two col-xs-12in your columns and because sum will be 24 they will auto stack on top of each other, or just leave xsstyle out.

如果你希望这是在桌面屏幕两列只有一列在手机屏幕上（即两排堆放在彼此的顶部）你把two col-md-6两个col-xs-12在列，因为和是24，他们将在每个的顶级汽车栈其他，或者只是离开xs风格。

回答by Aditya P Bhatt

From Twitter Bootstrap documentation:

来自Twitter Bootstrap 文档：

• small grid (≥ 768px) = .col-sm-*,
• medium grid (≥ 992px) = .col-md-*,
• large grid (≥ 1200px) = .col-lg-*.

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

to Read More...

阅读更多...

回答by Dhananjay

Here you go

干得好

col-lg-2 : if the screen is large (lg) then this component will take space of 2elements considering entire row can fit 12 elements ( so you will see that on large screen this component takes 16% space of a row)

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

col-lg-6 : if the screen is large (lg) then this component will take space of 6elements considering entire row can fit 12 elements -- when applied you will see that the component has taken half the available space in the row.

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

Above rule is only applied when the screen is large. when the screen is small this rule is discarded and only one component per row is shown.

以上规则仅适用于屏幕大时。当屏幕很小时，此规则将被丢弃，每行仅显示一个组件。

Below image shows various screen size widths :

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