在“col-md-4”，“ col-xs-1“，”col-lg-2“在Bootstrap中 [英] Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap

问题描述

  col-lg- * $ b在新的Bootstrap中，我对网格系统感到困惑，特别是这些类： $ b col-md- * 
 col-xs- * 
  

（其中*代表某些

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

他们实际上代表了什么？

忽略字母（x s ， sm ， md ， lg ） 现在，我会从数字开始......

• 数字（1-12）表示任何div的总宽度的一部分
  
• 所有div均分为12列
  
• 因此， col - * - 6 跨12列中的6列（宽度的一半）， col - * - 12 跨度12列（en轮胎宽度）等等

因此，如果您想让两个相等的列跨越一个div， / p>

 < div class =col-xs-6>第1列< / div> 
< div class =col-xs-6>第2栏< / div> 
  

如果您希望三个不相等的列跨越相同的宽度，可写出：

 < div class =col-xs-2>第1列< / div> 
< div class =col-xs-6>第2栏< / div> 
< div class =col-xs-4>第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>栏2-b< / div> 
< / div> 
< / div> 
  

每套嵌套div也包含最多12列的父div。 注意：因为每个 .col 类都有15px的填充，所以通常应该将嵌套的列包装在 .row ，它有-15px页边距。这可以避免重复填充，并保持嵌套和非嵌套col类之间的内容排列。

- 您没有具体询问 xs，sm，md，lg 的用法，但是它们携手并进，所以我不禁要去碰它...

简而言之，它们用于定义该类应该应用于哪个屏幕大小：

• xs = 超小屏幕（手机） （平板电脑）
  
• md = <中型屏幕（部分桌面）


• （其余桌面）

阅读网格
选项 b




$ b Y ou应该通常使用多个列类来对div进行分类，以便根据屏幕大小（这是启动引导响应的核心）来表现不同的行为。例如：类为 col-xs-6 和 col-sm-4 的div将跨越手机屏幕的一半手机（xs）和平板电脑屏幕上的1/3（sm）。

 < div class =col-xs-6 col-sm-4>第1栏< / div> <！ - 手机上的1/2宽度，平板上的1/3屏幕） - > 
< div class =col-xs-6 col-sm-8>第2列< / div> <！ - 手机上的1/2宽度，平板电脑上的2/3宽度 - > 
  

注意：根据下面的注释，给定屏幕大小的网格类除非另一个声明覆盖它（即 col-xs-6 col-md-4 跨越<$的6列），否则应用于该屏幕大小或更大 c $ c> xs 和 sm ，以及 md 和 lg ，即使 sm 和 lg

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

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

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

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?

解决方案

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

• 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

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>

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

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>

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.

-- 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 = extra small screens (mobile phones)
• sm = small screens (tablets)
• md = medium screens (some desktops)
• lg = large screens (remaining desktops)

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

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

NOTE: as per comment below, grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it (i.e. 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)

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

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. --This is a contentious issue, and not everyone agrees.

这篇关于在“col-md-4”，“ col-xs-1“，”col-lg-2“在Bootstrap中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！