Bootstrap 网格系统

2020-06-18 05:59:13易采站长站整理
最大容器宽度None (auto)750px970px1170pxClass 前缀.col-xs-.col-sm-.col-md-.col-lg-列数量和12121212最大列宽Auto60px78px95px间隙宽度30px
(一个列的每边分别 15px)30px
(一个列的每边分别 15px)30px
(一个列的每边分别 15px)30px
(一个列的每边分别 15px)可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes

基本的网格结构

下面是 Bootstrap 网格的基本结构:

.......

让我们来看几个简单的网格实例:

浏览器上调整窗口大小查看变化,或在您手机上查看效果。

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如,.col-xs-* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 111

在下面的实例中,我们有

..

,我们将使用 .col-md-offset-3 class 来居中这个 div。

实例

 

Hello, world!

Lorem ipsum dolor sit amet, consectetur adipisicing
elit.

结果如下所示:

网格系统偏移列

嵌套列

为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。

在下面的实例中,布局有两个列,第二列被分为两行四个盒子。

实例

 

Hello, world!

第一列

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

第二列 - 分为四个盒子

Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.

sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation

相关文章 大家在看