引导程序中“col-md-4”，“col-xs-1”，“col-lg-2”中数字的含义

本文翻译自：Meaning of numbers in “col-md-4”,“ col-xs-1”, “col-lg-2” in Bootstrap

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. How that number is aligning the grids? 这个数字是 如何 对齐网格的？
2. How to use these numbers? 如何 使用这些数字？
3. What they actually represent? 他们究竟代表什么呢？

---

#1楼

参考：https://stackoom.com/question/1dRHS/引导程序中-col-md-col-xs-col-lg-中数字的含义

---

#2楼

Applies to Bootstrap 3 only. 仅适用于Bootstrap 3。

Ignoring the letters (x s , sm , md , lg ) for now , I'll start with just the numbers... 忽略字母（X S，SM，MD，LG） 现在 ，我只用数字开始...

• the numbers (1-12) represent a portion of the total width of any div 数字（1-12）代表任何div的总宽度的一部分
• all divs are divided into 12 columns 所有div分为12列
• so, col-*-6 spans 6 of 12 columns (half the width), col-*-12 spans 12 of 12 columns (the entire width), etc 所以， col-*-6跨越12列中的6列（宽度的一半）， col-*-12跨越12列中的12列（整个宽度），等等

So, if you want two equal columns to 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 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>

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 .row wrapper 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. 每组嵌套的div也跨越其父div的12列。 NOTE: Since each .col class has 15px padding on either side, you should usually wrap nested columns in a .row , which has -15px margins. 注意：由于每个.col类的两边都有15px填充，因此通常应将嵌套列包装在.row ，其边距为-15px。 This avoids duplicating the padding and keeps the content lined up between nested and non-nested col classes. 这样可以避免重复填充，并使内容在嵌套和非嵌套col类之间保持一致。

-- 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... - 你没有具体询问xs, sm, md, lg使用情况，但它们是相辅相成的，所以我不禁触摸它......

In short, they are used to define at which screen size that class should apply: 简而言之，它们用于定义应该应用的类的屏幕大小 ：

• xs = extra small screens (mobile phones) xs = 超小屏幕 （手机）
• sm = small screens (tablets) sm = 小屏幕 （平板电脑）
• md = medium screens (some desktops) md = 中等屏幕 （某些桌面）
• lg = large screens (remaining desktops) lg = 大屏幕 （其余桌面）

Read the " Grid Options " chapter from the official Bootstrap documentation for more details. 有关更多详细信息，请阅读官方Bootstrap文档中的“ 网格选项 ”一章。

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). 您通常应该使用多个列类对div进行分类，因此它的行为会根据屏幕大小而有所不同（这是使引导响应的核心）。 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). 例如：具有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 -->

NOTE: as per comment below, grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it (ie col-xs-6 col-md-4 spans 6 columns on xs and sm , and 4 columns on md and lg , even though sm and lg were never explicitly declared) 注意：根据下面的评论，给定屏幕尺寸的网格类适用于该屏幕尺寸和更大，除非另一个声明覆盖它（即col-xs-6 col-md-4跨越xs 和sm上的6列，以及4列上的列md 和lg ，即使从未明确声明sm和lg ）

NOTE: if you don't define xs , it will default to col-xs-12 (ie col-sm-6 is half the width on sm , md and lg screens, but full-width on xs screens). 注意：如果你没有定义xs ，它将默认为col-xs-12 （即col-sm-6是sm ， md和lg屏幕宽度的一半，但在xs屏幕上是全宽）。

NOTE: it's actually totally fine if your .row includes more than 12 cols, as long as you are aware of how they will react. 注意：如果你的.row包含超过12个cols，只要你知道它们会如何反应，它实际上是完全正常的。 --This is a contentious issue, and not everyone agrees. - 这是一个有争议的问题，并不是每个人都同意。

---

#3楼

The main point is this: 重点是：

col-lg-* col-md-* col-xs-* col-sm define how many columns will there be in these different screen sizes. col-lg-* col-md-* 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-6 and two col-xs-6 classes 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-6 and two col-xs-12 in your columns and because sum will be 24 they will auto stack on top of each other, or just leave xs style out. 如果您希望桌面屏幕中有两列，而电话屏幕中只有一列（即两行堆叠在一起），则在列中放置two col-md-6和两个col-xs-12将是24他们将自动堆叠在彼此之上，或只是留下xs样式。

---

#4楼

From Twitter Bootstrap documentation : 来自Twitter Bootstrap文档 ：

• small grid (≥ 768px) = .col-sm-* , 小网格（≥768px）= .col-sm-* ，
• medium grid (≥ 992px) = .col-md-* , 中格（≥992px）= .col-md-* ，
• large grid (≥ 1200px) = .col-lg-* . 大网格（≥1200px）= .col-lg-* 。

to Read More... 阅读更多......

---

#5楼

The Bootstrap grid system has four classes: Bootstrap网格系统有四个类：
xs (for phones) xs（手机用）
sm (for tablets) sm（平板电脑）
md (for desktops) md（用于桌面）
lg (for larger desktops) lg（适用于较大的桌面）

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. 提示：每个类都会向上扩展，因此如果您希望为xs和sm设置相同的宽度，则只需指定xs。

OK, the answer is easy, but read on: 好的，答案很简单，但请继续阅读：

col-lg- stands for column large ≥ 1200px col-lg-代表≥ 1200px
col-md- stands for column medium ≥ 992px col-md-代表柱介质≥ 992px
col-xs- stands for column extra small ≥ 768px col-xs-代表超≥ 768px色谱柱

The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px (likely mobile devices)... 像素数是断点，因此例如当窗口小于768px （可能是移动设备）时， col-xs瞄准元素...

I also created the image below to show how the grid system works, in this examples I use them with 3, like col-lg-6 to show you how the grid system work in the page, look at how lg , md and xs are responsive to the window size: 我还创建了下面的图像来显示网格系统是如何工作的，在这个例子中我使用它们3，像col-lg-6向你展示网格系统如何在页面中工作，看看lg ， md和xs是如何工作的响应窗口大小：

---

#6楼

Here you go 干得好

col-lg-2 : if the screen is large ( lg ) then this component will take space of 2 elements 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 ），那么这个组件将占用2个元素的空间，考虑到整行可以容纳12个元​​素（因此你会看到在大屏幕上这个组件占用16％的空间）

col-lg-6 : if the screen is large ( lg ) then this component will take space of 6 elements 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 ），则此组件将占用6个元素的空间，考虑到整行可以容纳12个元​​素 - 应用时，您将看到该组件占用了行中可用空间的一半。

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 : 下图显示了各种屏幕尺寸宽度：