引导程序中"col-md-4","col-xs-1","col-lg-2"中数字的含义

Question

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

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

(其中*代表一些数字).

任何人都可以解释以下内容:

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

Answer 1

忽略字母(X 小号,SM,MD,LG)现在,我只用数字开始...

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

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

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

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

<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,这完全是另一个故事).

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

每组嵌套的div也跨越其父div的12列.注意:由于每个.col类在任一侧都有15px填充,因此通常应将嵌套列包装在a中.row,其中包含-15px的边距.这样可以避免重复填充,并使内容在嵌套和非嵌套col类之间保持一致.

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

简而言之,它们用于定义应该应用的类的屏幕大小:

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

有关详细信息,请阅读官方Bootstrap文档中的" 网格选项 "一章.

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

注:按下面的评论,对于给定的屏幕尺寸网格类适用于屏幕尺寸和更大的,除非另一个声明覆盖它(即col-xs-6 col-md-4跨越6列xs 和sm,和4列的md 和lg,即使sm和lg从来没有明确宣布)

注意:如果你没有定义xs,将默认为col-xs-12(即col-sm-6是一半的宽度sm,md和lg屏幕,但在全宽xs屏幕).

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

Answer 2

Bootstrap网格系统有四个类:
xs(用于手机)
sm(用于平板电脑)
md(用于桌面)
lg(用于大型桌面)

上面的类可以组合在一起,以创建更加动态和灵活的布局.

提示:每个类都会向上扩展,因此如果您希望为xs和sm设置相同的宽度,则只需指定xs.

好的,答案很简单,但请继续阅读:

col-lg-代表柱大? 1200px
col-md-代表柱介质? 992px
col- xs-代表柱子特别小? 768px

像素数是断点,因此例如col-xs在窗口小于768px(可能是移动设备)时定位元素...

我还创建了下面的图片显示网格系统是如何工作的,在这个例子我使用他们的3个,想col-lg-6向您展示在页面网格系统如何工作,看看如何lg,md并xs响应窗口大小:

Answer 3

重点是:

col-lg-* col-md-* col-xs-* col-sm 定义这些不同屏幕尺寸中的列数.

示例:如果您希望桌面屏幕和手机屏幕中有两列,则在列中放置两个col-md-6和两个col-xs-6类.

如果您希望桌面屏幕中有两列,而电话屏幕中只有一列(即两行堆叠在一起),您可以将two col-md-6两个col-xs-12列放在列中,因为总和将为24,它们将自动堆叠在每个列的顶部其他,或只是留xs出风格.

Answer 4

来自Twitter Bootstrap文档:

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

阅读更多......

Answer 5

干得好

col-lg-2：如果屏幕很大（lg），则此组件将占用2个 元素的空间，因为整行可以容纳12个元​​素（因此，您将在大屏幕上看到此组件仅占行的16％的空间）

col-lg-6：如果屏幕很大（lg），则此组件将占用6个 元素的空间，因为整行可以容纳12个元​​素-应用后，您将看到该组件占用了该行中一半的可用空间。

仅当屏幕较大时才应用以上规则。当屏幕较小时，此规则将被丢弃，并且每行仅显示一个组件。

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