栅格系统的使用

栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-*、.col-lg-*和.col-xl-*类名。当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构。

	超小设备<576px	平板≥576px	桌面显示器≥768px	大桌面显示器≥992px	超大桌面显示器≥1200px
.container最大容器宽度	（自动）100%	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

使用类前缀设置列的宽度

由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。

• col-栅格的数量(设置超小设备);
• col-sm-栅格的数量(设置平板);
• col-md-栅格的数量(设置桌面显示器);
• col-lg-栅格的数量(设置大桌面显示器);
• col-xl-栅格的数量(设置超大桌面显示器);

栅格系统中的列偏移

栅格系统：使用.offset-md-*类将列向右侧偏移，主要是通过使用.offset-md-*获取到当前元素并且增加了当前元素左侧的边距（margin）来实现的。md可以使用sm、xl和lg等替代，分别表示在不同屏幕下设置列的偏移。