Bootstrap 4 网格的基本结构

Bootstrap 4 网格的基本结构

 

网格类

Bootstrap 4 网格系统有以下 5 个类:

• .col- 针对所有设备 
• .col-sm- 平板 - 屏幕宽度等于或大于 576px
• .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。

 

• 使用行来创建水平的列组。

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

 

<!-- 让 Bootstrap 者自动处理布局 -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

 

 

<div class="row">
  <div class="col-（表示响应的设备: sm,md,lg或xl）-（表示一个数字, 同一行的数字相加为 12）"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

offset-*-* 类来设置偏移列。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移