问题描述
Twitter Bootstrap中的col-lg-*，col-md-*和col-sm-*有什么区别?
What is the difference among col-lg-* , col-md-* and col-sm-* in Twitter Bootstrap?
推荐答案
已更新2020 ...
Bootstrap 5 (阿尔法)中有一个新的-xxl-尺寸:
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
col-* - 0 (xs)col-sm-* - 576pxcol-md-* - 768pxcol-lg-* - 992pxcol-xl-* - 1200pxcol-xxl-* - 1400px
引导程序4 中有一个新的-xl-大小，请参见此演示.此外， -xs-中缀已删除，因此最小的列就是col-1，col-2 .. col-12等.
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
col-* - 0 (xs)col-sm-* - 576pxcol-md-* - 768pxcol-lg-* - 992pxcol-xl-* - 1200px
此外，Bootstrap 4包括新的自动布局列.它们还具有响应断点(col，col-sm，col-md等.)，但是没有定义宽度百分比.因此，自动布局列在整个行中填充等宽.
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 网格进入 4 层(或断点")...
The Bootstrap 3 grid comes in 4 tiers (or "breakpoints")...
- 超小(适用于智能手机
.col-xs-*) - 小(适用于平板电脑
.col-sm-*) - 中等(用于笔记本电脑
.col-md-*) - 大(用于笔记本电脑/台式机
.col-lg-*).
- Extra small (for smartphones
.col-xs-*) - Small (for tablets
.col-sm-*) - Medium (for laptops
.col-md-*) - Large (for laptops/desktops
.col-lg-*).
这些网格大小使您可以控制不同宽度上的网格行为.不同的层由CSS 媒体查询控制.
These grid sizes enable you to control grid behavior on different widths. The different tiers are controlled by CSS media queries.
所以在Bootstrap的12列网格中...
So in Bootstrap's 12-column grid...
col-sm-3在典型的小型设备宽度(> 768像素)上为12列宽中的3列(25％)
col-sm-3 is 3 of 12 columns wide (25%) on a typical small device width (> 768 pixels)
col-md-3在典型的中设备宽度(> 992像素)上为12列宽中的3列(25％)
col-md-3 is 3 of 12 columns wide (25%) on a typical medium device width (> 992 pixels)
较小的层(xs，sm或md)还定义了较大屏幕宽度的大小.因此，对于所有层上的相同大小列，只需设置最小视口的宽度即可.
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>与
<div class="col-sm-3">..</div>
会隐含更大的层.因为col-sm-3表示3 units on sm-and-up，除非被使用不同大小的较大层特别覆盖.
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(默认)>被sm>覆盖被md>覆盖被lg
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>
sm，md和lg网格将全部堆叠"到网格.在小于768像素的屏幕/视口上垂直放置.这是xs网格所适合的地方.使用col-xs-*类的列将不垂直堆叠，并继续在最小的屏幕上按比例缩小.
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.
本文介绍了更多有关Bootstrap网格方式的信息
这篇关于Bootstrap中的col-lg-*，col-md- *和col-sm- *有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！