bootstrap栅格系统总结

<div class="container">
  <div class="row">
    <div class="col-xs-  col-sm-"></div>
    <div class="col-xs-  col-sm-"></div>
    <div class="col-xs-  col-sm-"></div>
    <div class="col-xs-  col-sm-"></div>
  </div>
</div>

.container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是：

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
bootstrap.css中对.container的定义：

.container{
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto
}
@media (min-width:768px){
    .container{
        width:750px
    }
}
@media (min-width:992px){
    .container{
        width:970px
    }
}
@media (min-width:1200px){
    .container{
        width:1170px
    }
}

.col-xs-　　无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；适用于手机；
.col-sm-　　屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；适用于平板；
.col-md-　　屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；适用于桌面显示器；
.col-lg-　　屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；

Bootstrap把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份；

<div class="container">
　　<div class="row">
　　　　<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
　　　　<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
　　</div>
　　<div class="row">
　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
　　</div>
</div>

屏幕大于992px时：.col-md-8 和.col-md-4 还处于 作用范围内，如下

image

屏幕在769px-992px之间时：.col-md-已失效，而.col-sm- 还处在 作用范围内，如下

image

屏幕宽度小于768px时，.col-sm-已失效 只有.col-xs- 不受屏幕宽度影响，这时候就由.col-xs-起作用，如下

image