定义和使用
网格选项
|
特小屏幕 |
小屏幕 |
中等屏幕 |
大屏幕 |
特大屏幕 |
类前缀 |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
屏幕宽度 |
<576px |
≥576px |
≥768px |
≥992px |
≥1200px |
在上一章中,我们介绍了带有中小型设备类的网格示例;我们使用了两个 div(列),在小型设备上分配了 25%/75% 的份额,在中型设备上分配了 50%/50% 的份额:
但是在大型设备上,拆分比例为 33%/66% 可能会更好。
大型设备定义为屏幕宽度从 992px 到 1199px。
对于大型设备屏幕,我们将使用 .col-lg- * 类:
现在,Bootstrap 会说:“以较小的大小,查看其中带有 -sm- 的类并使用它们;以中等的大小,查看其中带有 -md- 的类并使用它们;以较大的大小查看 带有单词 -lg- 的类,并使用它们”。
以下示例将在小型设备上分配 25%/75%,在中型设备上分配 50%/50%,在大型和超大型设备上分配 33%/66%。 在超小型设备上,它将自动堆叠(100%):
输出结果如下:
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8
注意:注确保总和等于或少于12(不需要使用所有12个可用列)。