Grid 栅格

概述

布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理:
  • · 通过row在水平方向建立一组column(简写col)
  • · 你的内容应当放置于col内,并且,只有col可以作为row的直接元素
  • · 栅格系统中的列是指1到24的值来表示其跨越的范围。例如,三个等宽的列可以使用.col-8来创建
  • · 如果一个row中的col总和超过 24,那么多余的col会作为一个整体另起一行排列

代码演示

col-{{col}}
mb-20
col-{{24 - col}}
mb-20