实例
<!-- 两个相等的列 -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- 四个相等的列 -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- 六个相等的列 -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
亲自试一试
Row Cols
您还可以使用 .row-cols-* 类控制应该出现在彼此旁边的列数(无论有多少列):
实例
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
亲自试一试
更多不等列
实例
<!-- 两个不相等的列 -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- 四个不相等的列 -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3 of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
亲自试一试
等高
如果一列比另一列高(由于文本或 CSS 高度),其余的将跟随: