“col-md-4"中数字的含义col-xs-1"、“col-lg-2"在引导程序中 [英] Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap

问题描述

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

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

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

谁能解释一下:

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

解决方案

仅适用于 Bootstrap 3.

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

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

因此，如果您希望两个相等的列跨越一个 div，请写

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

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

第1列
<div class="col-xs-6">第 2 列</div><div class="col-xs-4">第 3 列</div>

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

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

<div class="row"><div class="col-xs-4">第 1-a 列</div><div class="col-xs-8">第 1-b 列</div>

<div class="col-xs-6"><div class="row"><div class="col-xs-2">第 2-a 列</div><div class="col-xs-10">第 2-b 列</div>

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

-- 你没有特别询问 xs, sm, md, lg 的用法，但它们是相辅相成的，所以我不禁触及它......

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

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

<块引用>

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

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

第1列
<!-- 移动设备上的 1/2 宽度，平板电脑上的 1/3 屏幕)--><div class="col-xs-6 col-sm-8">第 2 列</div><!-- 移动设备上的 1/2 宽度，平板电脑上的 2/3 宽度 -->

注意:根据下面的评论，给定屏幕尺寸的网格类适用于该屏幕尺寸和更大，除非另一个声明覆盖它(即 col-xs-6 col-md-4 在 xs 和 sm 上跨越 6 列，在 md<上跨越 4 列/code> 和 lg，即使 sm 和 lg 从未明确声明)

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

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

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?

解决方案

Applies to Bootstrap 3 only.

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>

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

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

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"在引导程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！