定义和使用
网格选项
|
特小屏幕 |
小屏幕 |
中等屏幕 |
大屏幕 |
特大屏幕 |
类前缀 |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
屏幕宽度 |
<576px |
≥576px |
≥768px |
≥992px |
≥1200px |
假设我们有一个包含两列的简单布局;对于小型设备,我们希望将列拆分为 25%/75%。
小型设备被定义为具有从 576px 到 767px 的屏幕宽度。
对于小型设备,我们将使用 .col-sm- * 类;我们将以下类添加到我们的两列中:
<div class="col-sm-3">...</div>
<div class="col-sm-9">...</div>
现在,Bootstrap 将说“以较小的尺寸,查找其中带有 -sm- 的类并使用它们”。
以下示例将在小型(以及中型,大型和超大型)设备上分配比例分别为 25%/75%。 在超小型设备上,它将自动堆叠(100%):
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-success">
col-sm-3
</div>
<div class="col-sm-9 bg-warning">
col-sm-9
</div>
</div>
</div>
尝试一下
输出结果如下:
注意:注确保总和等于或少于12(不需要使用所有12个可用列)。
对于 33.3%/66.6% 的拆分,您将使用 .col-sm-4 和 .col-sm-8;对于 50%/50% 的拆分,您将使用 .col-sm-6 和 .col-sm-6:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-success">
col-sm-4
</div>
<div class="col-sm-8 bg-warning">
col-sm-8
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-success">
col-sm-6
</div>
<div class="col-sm-6 bg-warning">
col-sm-6
</div>
</div>
</div>
尝试一下
输出结果如下: