布局容器

container 类⽤于固定宽度并⽀持响应式布局的容器

<div class="container">
 ...
</div>

container-fluid类⽤于100% 宽度，占据全部视⼝（viewport）的容器

<div class="container-fluid">
 ...
</div>

栅格网格系统

随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建⻚⾯布局，你的内容就可以放⼊这些创建好的布局中

在这里插入图片描述
具体设备根据如下配置

    数据⾏(.row)必须包含在容器（.container）中，以便为其赋予合适的对⻬⽅式和内距(padding)。
    在⾏(.row)中可以添加列(.column), 只有列（column）才可以作为⾏容器(.row)的直接⼦元素，但列数之和不能超过平分的总列数，⽐如12。如果⼤于12,则⾃动换到下⼀⾏

列组合

<div class="container">
 <div class="row">
 <div class="col-md-4">4列</div>
 <div class="col-md-8">8列</div>
 </div>
</div>

列偏移

<div class="container">
 <div class="row">
 <div class="col-md-1">1列</div>
 <div class="col-md-1">2列</div>
 <div class="col-md-1 col-md-offset-8">11列</div>
 <div class="col-md-1">12列</div>
 </div>
</div>

列排序

<div class="container">
 <div class="row">
 <div class="col-md-1 col-md-push-10">1列</div>
 <div class="col-md-1 col-md-pull-1">1列</div> 
 </div>
</div>