.cell
在 .row
中添加所需数目的 .cell
即可,所有单元格都会自动拥有合适的宽度。当一行没有足够的空间显示所有单元格时,多余的单元格会自动换行显示。以下相同颜色的单元格在同一行中。
使用 .cell-1
~ .cell-12
来手动指定单元格显示的宽度。指定宽度的单元格同样可以和自动宽度的单元格一起使用。
在 .column
中添加所需数目的 .cell
即可,所有单元格都会自动拥有合适的高度。应该手动为列添加一个指定的高度,否则列的高度为所有单元格的最小高度之和。以下例子中,所有列的高度指定为 8rem。当一列没有足够的高度显示所有单元格时会换行(类似多列)显示剩下的单元格。以下相同颜色的单元格在同一列中。
使用 .cell-1
~ .cell-12
来手动指定单元格显示的高度。指定高度的单元格同样可以和自动高度的单元格一起使用。
行或列可以同时使用来创建复杂的布局。
为 .row
或 .column
添加 .gutterless
来移除单元格内边距。
为 .row
或 .column
添加 .gutter-lg
来获得双倍的单元格内边距。