twitter bootstrap3中col-lg- *，col-md- *和col-sm- *之间的区别是什么？ [英] What is the difference among col-lg-*, col-md-* and col-sm-* in twitter bootstrap3?

问题描述

col-lg - * ， col-md - * 和<$ c $在Bootstrap 3中引入了Bootstrap 3网格，并且在Bootstrap 3网格中添加了一个新的Bootstrap 3网格。 4层（或断点）。

超小（适用于智能手机 .col-xs - * 小（对于平板电脑 .col-sm - * ），中（对于笔记本电脑 .col-md - * ）大（适用于笔记本电脑/台式机 .col-lg - * ）。这些网格大小使您能够控制不同设备（即台式机，笔记本电脑，平板电脑，智能手机等）上的网格行为。

/ p>

col-sm-3 是3个网格列宽（25％像素）

col-md-3 是典型介质设备宽度上的3个网格列宽（25％ （> 992像素）

等。

不同的网格大小。

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

sm md 和 lg 网格将在屏幕/视口上垂直堆叠小于768像素。这是 xs 网格适合的位置。使用 col-xs - * 类的列不会垂直堆叠，继续在最小的屏幕上缩小。

调整浏览器大小使用此演示

Bootstrap 4更新有一个新的XL大小，请参阅演示

另外，阅读这篇文章解释有关Bootstrap网格的更多信息

What is the difference among col-lg-* , col-md-* and col-sm-* in Twitter 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-*) and large (for laptops/desktops .col-lg-*). These grid sizes enable you to control grid behavior on different devices, i.e. desktop, laptops, tablet, smartphone, etc.

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

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

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

etc.

Combine the classes to use change column widths on different grid sizes..

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

Update for Bootstrap 4 there is a new XL size, see this demo

Also, read this article that explains more about the Bootstrap grid

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