网格系统 - Grid System

两列布局

01.三行都是两列布局，列的宽度比不同

三列布局

02.三行都是三列布局，列的宽度比不同

针对两种不同尺寸屏幕的响应式布局

• 在中、大尺寸下，一行显示；
• 在小尺寸下，两行显示

03-1.三列布局：在大窗口下显示

03-2.三列布局：在小窗口下显示

列重置

下面的代码正常情况应该出现四行，每行三列。特殊情况下换行可能出现问题，例如：某个元素高度超过一行的宽度，其后面的元素换行的时候就无法顶头换行，而是顶着这个超过行高的元素换行。

    

        
Box 1
        
Box 2
        
Box 3

        
        
Box 4
        
Box 5
        
Box 6

        
        
Box 7
        
Box 8
        
Box 9
        
Box 10
        
Box 11
        
Box 12
    

04-1.Box 4 元素被卡主，无法顶头换行

为了消除这种情况，可以在换行后可能被挡住的元素前面加入一个 clearfix 元素，这样换行元素就会顶头换行。

visible-md-block 表示只对 md 尺寸的列进行处理，如果不加限定，则对所有尺寸的列进行处理。

    
    

        
Box 1
        
Box 2
        
Box 3

        
        

        
Box 4
        
Box 5
        
Box 6

        
        

        
Box 7
        
Box 8
        
Box 9

        
        

        
Box 10
        
Box 11
        
Box 12
    

04-2.正常换行

针对两种不同尺寸屏幕的响应式列重置

注意：下面的代码只设置了 md 尺寸的屏幕下的列重置；其他尺寸屏幕下不会列重置，换行后的元素仍然会被卡主

    

        
Box 1
        
Box 2

        
        
Box 3

        
        

        
Box 4

        
Box 5
        
Box 6

        

        
Box 7
        
Box 8
        
Box 9

        

        
Box 10
        
Box 11
        
Box 12
    

04-3.在小屏幕下，换行出现错误

因此，应该为小尺寸下每个换行的元素也设置列重置

    

        
Box 1
        
Box 2

        
        

        
Box 3

        
        

        
Box 4


        

        
Box 5

        
Box 6

        

        

        
Box 7

        
Box 8

        

        
Box 9

        

        
Box 10

        

        
Box 11
        
Box 12
    

04-4.同时考虑不同屏幕尺寸下的列重置

针对两种不同尺寸屏幕的响应式列重置

同样是在每一个可能会被卡主的的元素前进行列重置

    

        
Box 1
        
Box 2

        
        

        
Box 3

        
        

        
Box 4

        
        

        

        
Box 5

        
Box 6

        
        

        

        
Box 7

        
Box 8
        

        

        
Box 9
        

        
Box 10
        

        
Box 11
        
Box 12
    

列偏移

在设置列占用的宽度时，可以同时设置偏移数，

    
    

        

            
.col-sm-4
        
        

            
.col-sm-8
        
    

     
    

        

            
.col-sm-8 .col-sm-offset-4
        
    


    



    
    

        

            
.col-sm-3
        
        

            
.col-sm-9
        
    


    
    

        

            
.col-sm-6 .col-sm-offset-3
        
        

            
.col-sm-3
        
    


    


     
    
    

        

            
.col-sm-3
        
        

            
.col-sm-3
        
        

            
.col-sm-3
        
        

            
.col-sm-3
        
    


      
    

        

            
.col-sm-3 .col-sm-offset-3
        
        

            
.col-sm-3 .col-sm-offset-3
        
    

05.列偏移

嵌套

在一个网格中可以继续创建行和列

06.网格嵌套

只在特定尺寸下显示的块

通过下面几个类，可以将元素设置成只在特定尺寸下显示的块

当前图块只在 超小屏幕 设备下显示，宽度小于 768px.
当前图块只在 小屏幕 设备下显示，宽度大于等于 768px 小于 992px.
当前图块只在 中等屏幕 设备下显示，宽度大于等于 992px 小于 1200px.
当前图块只在 大屏幕 设备下显示，宽度大于等于 1200px.

通过下面几个类，可以将元素设置成只在特定尺寸下隐藏

Class	Description
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

通过下面几个类，可以将元素设置成只在特定尺寸下隐藏

Class	Description
.visible-print-block
.visible-print-inline
.visible-print-inline-block
.hidden-print