bootstrap中col-lg-*,col-md-*和col-sm-*之间有什么区别？

Question

是什么之间的差异col-lg-*,col-md-*并col-sm-*在Twitter的引导？

Answer 1

2018年更新......

所述自举3格进来4层(或"断点")...

• 超小(适用于智能手机.col-xs-*)
• 小(片剂.col-sm-*)
• 中(适用于笔记本电脑.col-md-*)
• 大(适用于笔记本电脑/台式机.col-lg-*).

这些网格大小使您可以控制不同宽度的网格行为.不同的层由CSS 媒体查询控制.

所以在Bootstrap的12列网格中......

col-sm-3在典型的小型设备宽度(> 768像素)上是12列宽(25%)中的3列

col-md-3在典型的中等设备宽度(> 992像素)上是12列宽(25%)中的3列

较小的层(xs,sm或md)还定义了较大屏幕宽度的大小.因此,对于所有层上的相同大小的列,只需设置最小视口的宽度...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> 是相同的,

<div class="col-sm-3">..</div>

暗示了更大的层次.因为col-sm-3手段3 units on sm-and-up,除非被使用不同大小的较大层特别覆盖.

xs(默认)>重写sm>重写md>重写bylg

组合类以在不同的网格大小上使用更改列宽.这会创建一个响应式布局.

<div class="col-md-3 col-sm-6">..</div>

的sm,md而lg电网将所有的"栈"垂直于屏幕/视口小于768个像素.这是xs网格适合的位置.使用col-xs-*类的列不会垂直堆叠,并继续在最小的屏幕上缩小.

使用此演示调整浏览器的大小,您将看到网格缩放效果.

在Bootstrap 4中有一个新的-xl-大小,请参阅此演示.另外,-xs-缀已经被移除,所以最小的列是简单的col-1,col-2.. col-12等.

col-*- 0(xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Bootstrap 4网格演示

此外,本文还介绍了有关Bootstrap网格的更多信息

Answer 2

引导文档确实解释了它,但它仍然需要一段时间才能得到它.当我以两种方式之一向自己解释时,它更有意义:

如果您想到水平开始的列,那么您可以选择何时堆叠.

例如,如果您从列开始:ABC

您决定何时堆叠如下:

一个

乙

C

如果选择col-lg,则当宽度<1200px时,列将堆叠.

如果选择col-md,则当宽度<992px时,列将堆叠.

如果选择col-sm,则当宽度<768px时,列将堆叠.

如果选择col-xs,那么列将永远不会堆叠.

另一方面,如果您考虑堆叠的列,那么您可以选择它们变为水平的点:

如果选择col-sm,则当宽度> = 768px时,列将变为水平.

如果选择col-md,则当宽度> = 992px时,列将变为水平.

如果选择col-lg,则当宽度> = 1200px时,列将变为水平.

Answer 3

来自Twitter Bootstrap文档:

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

Answer 4

我认为令人困惑的一点是,BootStrap 3是一个移动的第一个响应系统,无法解释这是如何影响Bootstrap文档中该部分的col-xx-n层次结构的.这让您想知道如果您为较大的设备选择一个值,并且您想知道是否需要指定多个值,小型设备上会发生什么.(你没有)

我将尝试通过声明......较低的颗粒类型(xs,sm)尝试在较小的屏幕上保留布局外观来澄清这一点,较大的类型(md,lg)将仅在较大的屏幕上正确显示,但会将列包裹在较小的设备上.在先前示例中引用的值指的是引导程序降低外观以适合可用屏幕区域的阈值.

这在实践中的意思是,如果你制作列col-xs-n,那么即使在非常小的屏幕上它们也会保持正确的外观,直到窗口下降到一个如此限制的大小,以至于页面无法正确显示.这应该意味着宽度为768px或更小的设备应该按照您的设计显示您的表,而不是降级(单个或包裹的列形式).显然这仍然取决于列的内容,这是重点.如果页面试图在一个小屏幕上并排显示多列大数据,那么如果您没有考虑它,列将自然地以一种可怕的方式包裹.因此,根据列中的数据,您可以确定布局被亵渎的点,以充分显示内容.

例如,如果您的页面包含三个col-sm-n列,则当页面宽度低于992px时,bootstrap会将列包装成行.这意味着数据仍然可见,但需要垂直滚动才能查看.如果您不希望布局降级,请选择xs(只要您的数据可以在三列中的较低分辨率设备上充分显示)

如果数据的水平位置很重要,那么您应该尝试选择较低的粒度值以保持视觉特性.如果位置不太重要但页面必须在所有设备上都可见,则应使用更高的值.

如果选择col-lg-n,则列将正确显示,直到屏幕宽度低于xs阈值1200px.

Answer 5

让我们简化 Bootstrap！

请注意col-sm如何占据下面的 100% 宽度（换句话说，分成新行）576px但col没有。您可以注意到 gif 中顶部中心的当前宽度。

代码来了：

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

自举默认对齐所有列在单（COL）行具有相同的宽度。在这种情况下col，无论屏幕大小如何，三个都将占据 100%/3 的宽度。你可以在gif中注意到这一点。

现在，如果我们只想渲染每行一列，即为每列提供 100% 的宽度但仅适用于较小的屏幕怎么办？现在col-xx上课了！

我使用col-sm是因为我想将列分成 576 像素以下的单独行。这 4 个col-xx类由 Bootstrap 提供，用于不同的显示设备，如手机、平板电脑、笔记本电脑、大型显示器等。

所以，col-sm会跌破 576px，col-md跌破 768px，col-lg跌破 992px，col-xl跌破 1200px

请注意，col-xs引导程序 4 中没有类。

这几乎是总结。你可以回去工作了。

但还有更多内容。现在是用于自定义宽度的col-*和col-xx-*。

记得在上面的例子中我提到过col或col-xx在一行中采用相等的宽度。因此，如果我们想为特定对象提供更多宽度，col我们可以这样做。

Bootstrap 行被分成 12 部分，所以在上面的例子中有 3 个col所以每一个需要 12/3 = 4 部分。您可以将这些部分视为测量宽度的一种方式。

我们也可以这样写，在格式col-*即col-4是这样的：

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

它不会有什么区别，因为默认情况下引导程序给出等于col(4 + 4 + 4 = 12) 的宽度。

但是，如果我们想给 1st 7 份col，给 2nd 3 份col，剩下 2 份 (12-7-3 = 2) 给 3rd col(7+3+2 所以总数是 12)，我们可以简单地这样做：

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

你也可以自定义col-xx-*类的宽度。

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

它在动作中看起来如何？

如果总和col大于 12 怎么办？然后col将移动/调整到下面的线。是的，一行可以有任意数量的列！

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

如果我们想要大屏幕一行 3 列，但将这些列分成2 行用于小屏幕怎么办？

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

你可以在这里玩：https : //jsfiddle.net/JerryGoyal/6vqno0Lm/

Answer 6

设备大小和类前缀:

• 超小型设备电话(<768px) - .col-xs-
• 小型设备平板电脑(≥768px) - .col-sm-
• 中型设备台式机(≥992px) - .col-md-
• 大型设备台式机(≥1200px) - .col-lg-

网格选项:

参考:网格系统

Answer 7

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

Answer 8

TL; DR

.col-X-Y表示在屏幕X或更大的尺寸上，拉伸该元素以填充Y列。

Bootstrap提供了每个12列的网格.row，因此Y = 3表示宽度= 25％。

xs, sm, md, lg 分别是智能手机，平板电脑，笔记本电脑和台式机的尺寸。

在不同的屏幕尺寸上指定不同的宽度的目的是让您在较小的屏幕上放大尺寸。

例

<div class="col-lg-6 col-xs-12">

含义：台式机为50％宽度，移动设备，平板电脑和笔记本电脑为100％宽度。