Bootstrap 网格示例
-
-
-
更多相等的列
以下示例演示了更多相等的列的布局:输出结果如下:1 of 22 of 21 of 42 of 43 of 44 of 41 of 62 of 63 of 64 of 65 of 66 of 6 -
行列
您还可以使用 .row-cols-* 类来控制应相邻显示的列数(与cols无关):输出结果如下:1 of 22 of 21 of 42 of 43 of 44 of 41 of 62 of 63 of 64 of 65 of 66 of 6 -
更多不相等的列
以下示例演示了更多不相等的列的布局:输出结果如下:1 of 22 of 21 of 42 of 43 of 44 of 41 of 42 of 43 of 44 of 4 -
相等的高
如果其中一列比另一列高(由于文本或CSS高度),其余列将遵循:输出结果如下:相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循colcol -
-
响应式类
Bootstrap 网格系统具有五类:- .col-(超小型设备-屏幕宽度<576px)
- .col-sm-(小型设备-屏幕宽度>=576px)
- .col-md-(中等设备-屏幕宽度>=768px)
- .col-lg-(大型设备-屏幕宽度>=992px)
- .col-xl-(超大型设备-屏幕宽度>=1200px)
可以将上述类组合在一起以创建更多动态和灵活的布局。提示:每个类都按比例增加,因此,如果您希望为 sm 和 md 设置相同的宽度,则只需指定 sm。
以下示例显示了如何创建一个列布局,该列布局开始于堆叠在超小型设备上,然后在大型设备(sm,md,lg和xl)上变为水平:输出结果如下:col-sm-9col-sm-3col-smcol-smcol-sm -