引导网格示例

基本的网格布局,让您熟悉 Bootstrap 网格系统中的构建。

五个网格层

Bootstrap 网格系统有五层,我们支持的每个设备范围都有一层。每层从最小视口大小开始,并自动应用于较大的设备,除非被覆盖。

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

三个相等的列

获得三个等宽的列,从桌面开始并扩展到大型桌面。在移动设备、平板电脑及以下设备上,列将自动堆叠。

.col-md-4
.col-md-4
.col-md-4

三不等列

获取从桌面开始并扩展到各种宽度的大型桌面的三列。请记住,单个水平块的网格列最多应为 12 个。不仅如此,无论视口如何,列都会开始堆叠。

.col-md-3
.col-md-6
.col-md-3

两列

获得从桌面开始并扩展到大型桌面的两列。

.col-md-8
.col-md-4

全宽,单列

全角元素不需要网格类。


具有两个嵌套列的两列

根据文档,嵌套很容易——只需在现有列中放置一行列。这为您提供了从桌面开始并扩展到大型桌面的两列,在较大的列中还有另外两列(等宽)。

在移动设备尺寸、平板电脑及以下尺寸下,这些列及其嵌套列将堆叠。

.col-md-8
.col-md-6
.col-md-6
.col-md-4

混合:移动和桌面

Bootstrap v4 网格系统有五层类:xs(特小)、sm(小)、md(中)、lg(大)和 xl(特大)。您几乎可以使用这些类的任意组合来创建更加动态和灵活的布局。

每一层的类都会按比例放大,这意味着如果您计划为 xs 和 sm 设置相同的宽度,您只需要指定 xs。

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

混合:移动设备、平板电脑和台式机

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4