CSS Bootstrap 中的 col-lg-、col-md- 和 col-sm-* 有什么区别？

Question

提问by StreetCoder

What is the difference among col-lg-*, col-md-*and col-sm-*in Twitter Bootstrap?

Twitter Bootstrap中的col-lg-*,col-md-*和有什么区别col-sm-*？

Answer 1

采纳答案by Zim

Updated 2019...

2019 年更新...

The Bootstrap 3grid comes in 4tiers (or "breakpoints")...

所述自举3格进来4层（或“断点”）...

Extra small (for smartphones .col-xs-*)
Small (for tablets .col-sm-*)
Medium (for laptops .col-md-*)
Large (for laptops/desktops .col-lg-*).

超小（适用于智能手机.col-xs-*）
小（用于平板电脑.col-sm-*）
中（适用于笔记本电脑.col-md-*）
大（适用于笔记本电脑/台式机.col-lg-*）。

These grid sizes enable you to control grid behavior on different widths. The different tiers are controlled by CSS media queries.

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

So in Bootstrap's 12-column grid...

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

col-sm-3is 3 of 12 columns wide (25%) on a typical smalldevice width (> 768 pixels)

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

col-md-3is 3 of 12 columns wide (25%) on a typical mediumdevice width (> 992 pixels)

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

The smaller tier (xs, smor md) also defines the size for larger screen widths. So, for the samesize column on all tiers, just set the width for the smallest viewport...

较小的层（xs，sm或md）还定义了用于更大的屏幕宽度的尺寸。因此，对于所有层上相同大小的列，只需设置最小视口的宽度...

<div class="col-lg-3 col-md-3 col-sm-3">..</div>is the same as,

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

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

Larger tiers are implied.Because col-sm-3means 3 units on sm-and-up, unless specifically overridden by a larger tier that uses a different size.

隐含了更大的层。因为col-sm-3意味着3 units on sm-and-up，除非被使用不同大小的更大层特别覆盖。

xs(default) > overridden by sm> overridden by md> overridden by lg

xs（默认）> 被覆盖sm> 被覆盖md> 被覆盖lg

Combinethe classes to use change column widths on differentgrid sizes. This creates a responsive layout.

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

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

The sm, mdand lggrids will all "stack" vertically on screens/viewports less than 768 pixels. This is where the xsgrid fits in. Columns that use the col-xs-*classes will notstack vertically, and continue to scale down on the smallest screens.

的sm，md而lg电网将在屏幕上/视所有“堆栈”纵向比768少。这是xs网格适合的地方。使用col-xs-*类的列不会垂直堆叠，并在最小的屏幕上继续缩小。

Resize your browser using this demoand you'll see the grid scaling effects.

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

Bootstrap 4

引导程序 4

In Bootstrap 4there is a new -xl-size, see this demo. Also the -xs-infix has been removed, so smallest columns are simply col-1, col-2.. col-12, etc..

在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 Grid Demo

Bootstrap 4 网格演示

Additionally, Bootstrap 4 includes new auto-layout columns. These also have responsive breakpoints (col, col-sm, col-md, etc..), but don't have defined % widths. Therefore, the auto-layout columns fill equal widthacross the row.

此外，Bootstrap 4 包括新的自动布局列。它们也有响应断点（col、col-sm、col-md等），但没有定义 % 宽度。因此，自动布局列在整个行中填充相等的宽度。

This article explains more about the Bootstrap grid

这篇文章解释了有关 Bootstrap 网格的更多信息

Answer 2

回答by ryanman

The bootstrap docsdo explain it, but it still took me a while to get it. It makes more sense when I explain it to myself in one of two ways:

bootstrap文档确实解释了它，但我还是花了一段时间才弄明白。当我用以下两种方式之一向自己解释时，它会更有意义：

If you think of the columns starting out horizontally, then you can choose when you want them to stack.

如果您考虑从水平方向开始的列，那么您可以选择希望它们何时堆叠。

For example, if you start with columns: A B C

例如，如果您从列开始：ABC

You decide when should they stack to be like this:

您决定何时应该将它们堆叠成这样：

A

一种

B

乙

C

If you choose col-lg, then the columns will stack when the width is < 1200px.

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

If you choose col-md, then the columns will stack when the width is < 992px.

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

If you choose col-sm, then the columns will stack when the width is < 768px.

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

If you choose col-xs, then the columns will never stack.

如果您选择 col-xs，则列将永远不会堆叠。

On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal:

另一方面，如果您认为列开始堆叠，那么您可以选择它们在什么时候变为水平：

If you choose col-sm, then the columns will become horizontal when the width is >= 768px.

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

If you choose col-md, then the columns will become horizontal when the width is >= 992px.

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

If you choose col-lg, then the columns will become horizontal when the width is >= 1200px.

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

Answer 3

回答by Mathias Rechtzigel

From Twitter Bootstrap documentation:

来自Twitter Bootstrap 文档：

small grid (≥ 768px) = .col-sm-*,
medium grid (≥ 992px) = .col-md-*,
large grid (≥ 1200px) = .col-lg-*.

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

Answer 4

回答by David Bridge

I think the confusing aspect of this is the fact that BootStrap 3 is a mobile first responsive system and fails to explain how this affects the col-xx-n hierarchy in that part of the Bootstrap documentation. This makes you wonder what happens on smaller devices if you choose a value for larger devices and makes you wonder if there is a need to specify multiple values. (You don't)

我认为这个令人困惑的方面是 BootStrap 3 是一个移动优先响应系统，并且未能解释这如何影响 Bootstrap 文档那部分中的 col-xx-n 层次结构。这让您想知道如果您为较大的设备选择一个值，在较小的设备上会发生什么，并让您想知道是否需要指定多个值。（你没有）

I would attempt to clarify this by stating that... Lower grain types (xs, sm) attempt retain layout appearance on smaller screens and larger types (md,lg) will display correctly only on larger screens but will wrap columns on smaller devices. The values quoted in previous examples refer to the threshold as which bootstrap degrades the appearance to fit the available screen estate.

我将尝试通过声明...来澄清这一点...较低的粒度类型（xs，sm）尝试在较小的屏幕上保留布局外观，而较大的类型（md，lg）将仅在较大的屏幕上正确显示，但会在较小的设备上包装列。前面示例中引用的值指的是引导程序降低外观以适应可用屏幕空间的阈值。

What this means in practice is that if you make the columns col-xs-n then they will retain correct appearance even on very small screens, until the window drops to a size that is so restrictive that the page cannot be displayed correctly. This should mean that devices that have a width of 768px or less should show your table as you designed it rather than in degraded (single or wrapped column form). Obviously this still depends on the content of the columns and that's the whole point. If the page attempts to display multiple columns of large data, side by side on a small screen then the columns will naturally wrap in a horrible way if you did not account for it. Therefore, depending on the data within the columns you can decide the point at which the layout is sacificed to display the content adequately.

这在实践中意味着，如果您将列设置为 col-xs-n，那么即使在非常小的屏幕上它们也将保持正确的外观，直到窗口大小限制到无法正确显示页面为止。这应该意味着宽度为 768 像素或更小的设备应该按照您设计的方式显示您的表格，而不是降级（单列或环绕列的形式）。显然，这仍然取决于列的内容，这就是重点。如果页面试图在小屏幕上并排显示多列大数据，那么如果您没有考虑到这一点，这些列自然会以一种可怕的方式换行。因此，根据列中的数据，您可以决定牺牲布局以充分显示内容的点。

e.g. If your page contains three col-sm-n columns bootstrap would wrap the columns into rows when the page width drops below 992px. This means that the data is still visible but will require vertical scrolling to view it. If you do not want your layout to degrade, choose xs (as long as your data can be adequately displayed on a lower resolution device in three columns)

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

If the horizontal position of the data is important then you should try to choose lower granularity values to retain the visual nature. If the position is less important but the page must be visible on all devices then a higher value should be used.

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

If you choose col-lg-n then the columns will display correctly until the screen width drops below the xs threshold of 1200px.

如果您选择 col-lg-n，则列将正确显示，直到屏幕宽度低于 1200 像素的 xs 阈值。

Answer 5

回答by Ani Menon

Device Sizes and class prefix:

设备尺寸和类前缀：

Extra small devices Phones (<768px) - .col-xs-
Small devices Tablets (≥768px) - .col-sm-
Medium devices Desktops (≥992px) - .col-md-
Large devices Desktops (≥1200px) - .col-lg-

超小设备手机（<768px） - .col-xs-
小型设备平板电脑 (≥768px) - .col-sm-
中型设备桌面（≥992px） - .col-md-
大型设备桌面（≥1200px） - .col-lg-

Grid options:

网格选项：

Reference: Grid System

参考：网格系统

Answer 6

回答by Varun Jain

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

回答by Alex R

TL;DR

TL; 博士

.col-X-Ymeans on screen size X and up, stretch this element to fill Y columns.

.col-X-Y表示在屏幕尺寸 X 及以上时，拉伸此元素以填充 Y 列。

Bootstrap provides a grid of 12 columns per .row, so Y=3 means width=25%.

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

xs, sm, md, lgare the sizes for smartphone, tablet, laptop, desktop respectively.

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

The point of specifying different widths on different screen sizes is to let you make things larger on smaller screens.

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

Example

例子

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

Meaning: 50% width on Desktops, 100% width on Mobile, Tablet, and Laptop.

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

Answer 8

回答by Ted

One particular case : Before learning bootstrap grid system, make sure browser zoom is set to 100% (a hundred percent). For example : If screen resolution is (1600px x 900px) and browser zoom is 175%, then "bootstrap-ped" elements will be stacked.

一种特殊情况：在学习引导网格系统之前，请确保浏览器缩放设置为 100%（100%）。例如：如果屏幕分辨率是 (1600px x 900px) 并且浏览器缩放是 175%，那么“bootstrap-ped”元素将被堆叠。

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Chrome zoom 100%

Chrome 缩放 100%

Browser 100 percent - elements placed horizontally

浏览器 100% - 元素水平放置

Chrome zoom 175%

Chrome 缩放 175%

Browser 175 percent - stacked elements

浏览器 175% - 堆叠元素

Answer 9

回答by Nemo Holmes

well it's used to tell bootstrap how many columns are to be placed in a row depending on the screen size-

好吧，它用于告诉引导程序根据屏幕大小在一行中放置多少列-

col-xs-2

would show only 2 columns in a row in extra small(xs) screen, in the same way as sm defines a small screen, md(medium sized), lg(large sized), but according to bootstrap smaller first rule, if you mention

在超小（xs）屏幕中只显示一行中的 2 列，与 sm 定义小屏幕的方式相同，md（中型），lg（大型），但根据引导程序较小的第一条规则，如果你提到

xs-col-2 md-col-4

then 2 columns would be shown in every row for screen sizes from xs upto sm(included) and changes when it gets next size i.e. for md up to lg(included) for a better understanding of screen sizes try running them in various screen modes in chrome's developer mode(ctr+shift+i) and try various pixels or devices

然后将在每一行中显示 2 列，用于从 xs 到 sm（包括）的屏幕尺寸，并在获得下一个尺寸时进行更改，即 md 到 lg（包括）以更好地了解屏幕尺寸尝试在各种屏幕模式下运行它们chrome 的开发者模式（ctr+shift+i）并尝试各种像素或设备

Answer 10

回答by JerryGoyal

Let's un-complicate Bootstrap!

让我们简化 Bootstrap！

Notice how the col-smoccupies the 100% width (in other terms breaks into new line) below 576pxbut coldoesn't. You can notice the current width at the top center in gif.

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

Here comes the code:

代码来了：

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

Bootstrap by default aligns all the columns(col) in a single rowwith equal width. In this case three colwill occupy 100%/3 width each, whatever the screen size. You can notice that in gif.

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

Now what if we want to render only one column per line i.e give 100% width to each column but for smaller screens only? Now comes the col-xxclasses!

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

I used col-smbecause I wanted to break the columns into separate lines below 576px. These 4 col-xxclasses are provided by Bootstrap for different display devices like mobiles, tablets, laptops, large monitors etc.

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

So,col-smwould break below 576px, col-mdwould break below 768px, col-lgwould break below 992px and col-xlwould break below 1200px

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

Note that there's no col-xsclass in bootstrap 4.

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

This pretty much sums-up. You can go back to work.

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

But there's bit more to it. Now comes the col-*and col-xx-*for customizing width.

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

Remember in the above example I mentioned that color col-xxtakes the equal width in a row. So if we want to give more width to a specific colwe can do this.

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

Bootstrap row is divided into 12 parts, so in above example there were 3 colso each one takes 12/3 = 4 part. You can consider these parts as a way to measure width.

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

We could also write that in format col-*i.e. col-4like this :

我们也可以这样写，在格式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>

And it would've made no difference because by default bootstrap gives equal width to col(4 + 4 + 4 = 12).

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

But, what if we want to give 7 parts to 1st col, 3 parts to 2nd coland rest 2 parts (12-7-3 = 2) to 3rd col(7+3+2 so total is 12), we can simply do this:

但是，如果我们想给 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>

and you can customize the width of col-xx-*classes also.

你也可以自定义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>

How does it look in the action?

它在动作中看起来如何？

What if sum of colis more than 12? Then the colwill shift/adjust to below line. Yes, there can be any number of columns for a row!

如果总和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>

What if we want 3 columns in a row for large screens but split these columns into 2 rowsfor small screens?

如果我们想要大屏幕一行 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>

You can play around here: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

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

CSS Bootstrap 中的 col-lg-、col-md- 和 col-sm-* 有什么区别？

提问by StreetCoder

采纳答案by Zim

Bootstrap 4

引导程序 4

回答by ryanman

回答by Mathias Rechtzigel

回答by David Bridge

回答by Ani Menon

回答by Varun Jain

回答by Alex R

回答by Ted

回答by Nemo Holmes

回答by JerryGoyal

Let's un-complicate Bootstrap!

让我们简化 Bootstrap！

相关推荐

最近更新

标签

CSS Bootstrap 中的 col-lg-*、col-md-* 和 col-sm-* 有什么区别？

提问by StreetCoder

采纳答案by Zim

Bootstrap 4

引导程序 4

回答by ryanman

回答by Mathias Rechtzigel

回答by David Bridge

回答by Ani Menon

回答by Varun Jain

回答by Alex R

回答by Ted

回答by Nemo Holmes

回答by JerryGoyal

Let's un-complicate Bootstrap!

让我们简化 Bootstrap！

相关推荐

CSS Bootstrap 3 中的流体容器

CSS :hover 在 IE9 中无法正常工作

使用 CSS 去除嵌入的 vimeo iframe 上的黑色边框？

CSS 是否可以制作渐变边框？

相关推荐

最近更新

标签

CSS Bootstrap 中的 col-lg-、col-md- 和 col-sm-* 有什么区别？