BootStrap 栅格系统

栅格系统

这套bootstrap提供的是一套响应式、移动设备优先的流式栅格系统。每一行分为最多12列，如果有所超出，就会自动换行。

栅格系统通过一系列的行（row）和列（column）的组合来创建页面布局。

首先我们要先创建布局容器，可以用.contain或者.contain-fluid（100%宽度）。

<div class="contain">

</div>

我们的行（row）是必须包含在容器中的

<div class="contain">

<div class="row"></div>

</div>

然后我们就可以在行（row）中创建列，一行最多可以分为12列

<div class="contain">

<div class="row">

<div class="col-md-4"></div>

<div class="col-md-8"></div>

</div>

</div>

列偏移

我们可以使用.col-md-offset-*类来将行里面的列向右偏移，比如.col-md-offset-4将元素向右偏移了4个列的宽度，如果这一行偏移后超过了12，会先换行，再偏移。

类前缀包括：

1. xs（超小屏幕≤768px）(手机)
2. sm（小屏幕 ≥768px）（平板）
3. md（中等屏幕 ≥992px）（桌面显示器）
4. lg（大屏幕 ≥1200px）（大桌面显示器）