Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。
.container
类用于固定宽度并支持响应式布局的容器。
.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
|
超小屏幕xs
手机 (<576px)
|
小屏幕sm
平板 (≥576px)
|
小屏幕md
平板 (≥768px)
|
中等屏幕lg
桌面显示器 (≥992px)
|
大屏幕xl
大桌面显示器 (≥1200px)
|
大屏幕xxl
大桌面显示器 (≥1400px)
|
超大屏幕
大桌面显示器xxxl (≥1600px)
|
栅格系统行为 |
总是垂直排列 |
开始是堆叠在一起的,当大于阈值时将变为水平排列 |
.container 最大宽度 |
None(自动) |
540px |
720px |
940px |
1140px |
1320px |
1500px |
类前缀 |
.col-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
.col-xxl-
|
.col-xxxl-
|
列数 |
12 |
槽宽 |
20px (每列左右均有 10px 的 padding) |