02-栅格系统

栅格系统

将一个DIV容器看作一个网格，有行有列，Bootstrap将容器横着分为12列栅格

• 容器使用.container（固定容器）或.container-fluid（流式容器）表示
• 行使用.row表示，列使用.col-*表示
• 列与列之间有30px的槽
  • Bootstrap3设置列的内边距为0来取消
  • Bootstrap4设置行.no-gutters类即可
• 支持列换行，当前行盛不下所有的列时会自动换行，也可使用以下换行符来强制换行
  • Bootstrap3使用.clearfix类的盒子当分隔符
  • Bootstrap4使用.w-100类的盒子当分隔符
• 支持列偏移.col-*-offset-*，与列重排序不同的是会挤开其他的列
• 支持重排序
  • Bootstrap3：使用.col-*-push-*和.col-*-pull-*需要手动计算，和列偏移不同的是会覆盖其他列
  • Bootstrap4：使用.order-*-*只需要指定排名即可（只会在指定order属性的列上做排序）
• 支持列嵌套

Bootstrap3

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
.container 最大宽度	None (auto)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-

Bootstrap4

	超小屏幕 (新增规格)<576px	小屏幕 次小屏≥576px	中等屏幕 窄屏≥768px	大屏幕 桌面显示器≥992px	超大屏幕 大桌面显示器≥1200px
.container 最大宽度	None (auto)	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-