BootStrap-栅格系统

引入移动设备优先

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

.container 类用于固定宽度并支持响应式布局的容器

  ...

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

  ...

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

“行（.row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）

辅助记忆：

xs：xiao screen

sm: small

md:middle

lg:large

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


  
.col-md-4
  
.col-md-4
  
.col-md-4


  
.col-md-6
  
.col-md-6

  
.col-xs-12 .col-md-8
  
.col-xs-6 .col-md-4




  
.col-xs-6 .col-md-4
  
.col-xs-6 .col-md-4
  
.col-xs-6 .col-md-4




  
.col-xs-6
  
.col-xs-6

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

        
col-md-4 .col-sm-3
        
col-md-4 .col-sm-3
        
col-md-4 .col-sm-3
        
col-md-4
　　　　//左边空出两格

行内嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

        

            
4-1
            
4-2
            
4-3
        
        
md-4


------------------------------------------------
//消除左右空白padding
.col-md-8{
            padding-left: 0;
            padding-right: 0;
        }

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

push 向右推

pull 向左拉

        
2
        
2
        
2
        
2
        
2
        
2

        
2-5
        
3-3

跨设备的组合-支持多种分辨率设备

xs超小分辨率下，6 6

sm小分辨率  ， 3 6

中等分辨率 ， 8 4

清除浮动

清除浮动前，后面的继续排在第一行：

清除浮动后：

    

        

            .col-xs-6 .col-sm-3
            .col-xs-6 .col-sm-3
            .col-xs-6 .col-sm-3
        
        
        
    //只对xs超小分辨率起作用

        
.col-xs-6 .col-sm-3
        
.col-xs-6 .col-sm-3