Bootstrap 中的 col-lg-*、col-md-* 和 col-sm-* 有什么区别? [英] What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

问题描述

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

解决方案

2020 年更新...

引导程序 5

在 Bootstrap 5 (alpha) 中有一个新的 -xxl- 大小:

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

Bootstrap 5 网格演示

---

引导程序 4

在 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 4 包括新的自动布局列.这些也有响应断点(col、col-sm、col-md 等)，但没有定义 % 宽度.因此，自动布局的列会在行中等宽填充.

---

引导程序 3

Bootstrap 3 网格有 4 层(或断点")...

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

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

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

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

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

<小时>

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

<div class="col-lg-3 col-md-3 col-sm-3">..</div> 与，

..

更大的层是隐含的.因为col-sm-3意味着sm-and-up上的3个单元，除非被一个使用不同大小的较大层.

xs(默认)>被 sm 覆盖 >被 md 覆盖 >被 lg

覆盖<小时>

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

..

sm、md 和 lg 网格都将堆叠"在小于 768 像素的屏幕/视口上垂直.这是 xs 网格适合的地方.使用 col-xs-* 类的列将不垂直堆叠，并继续按比例缩小在最小的屏幕上.

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

---

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

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

解决方案

Updated 2020...

Bootstrap 5

In Bootstrap 5 (alpha) there is a new -xxl- size:

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

Bootstrap 5 Grid Demo

---

Bootstrap 4

In Bootstrap 4 there 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..

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

Bootstrap 4 Grid Demo

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 width across the row.

---

Bootstrap 3

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

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

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

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

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

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

---

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

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

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

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

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

---

Combine the classes to use change column widths on different grid sizes. This creates a responsive layout.

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

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

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

---

This article explains more about how the Bootstrap grid

这篇关于Bootstrap 中的 col-lg-*、col-md-* 和 col-sm-* 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！