网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式，在这一节中所涉及到的示例，我们都以中屏（970px）为例进行介绍，其他屏幕的使用也类似这一种。关于屏幕尺寸如下图：

1、列组合

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性，例如：

    
       
     
          
      
       .col-md-4    
       
        .col-md-8    
        
             
         
          .col-md-4    
          
           .col-md-4    
           
            .col-md-4    
            
                 
             
              .col-md-3    
              
               .col-md-6    
               
                .col-md-3 
               
              
             
            
           
          
         
        
       
      
     
    

使用上面的结构，你将看到下图的效果：

(在右侧结果窗口中查看时需要设置为全屏)

实现列组合方式非常简单，只涉及两个CSS两个特性：浮动与宽度百分比。在bootstrap.css文件的第1088行～1126行：

/*确保所有列左浮动*/

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {    float: left; }

/*定义每个列组合的宽度（使用的百分比）*/

  .col-md-12 {    width: 100%;  }  .col-md-11 {    width: 91.66666667%;  }  .col-md-10 {    width: 83.33333333%;  }  .col-md-9 {    width: 75%;  }  .col-md-8 {    width: 66.66666667%;  }  .col-md-7 {    width: 58.33333333%;  }  .col-md-6 {    width: 50%;  }  .col-md-5 {    width: 41.66666667%;  }  .col-md-4 {    width: 33.33333333%;  }  .col-md-3 {    width: 25%;  }  .col-md-2 {    width: 16.66666667%;  }  .col-md-1 {    width: 8.33333333%;  }