📌  相关文章
📜  Framework7布局网格

📅  最后修改于: 2021-01-02 05:46:55             🧑  作者: Mango

Framework7布局网格

内容网格用于根据您的需要放置内容。 Framework 7提供了不同类型的网格类型和不同类型的列大小。

不同列大小的不同类的列表：

Index Class Table class Width
1) col-5 tablet-5 5%
2) col-10 tablet-10 10%
3) col-15 tablet-15 15%
4) col-20 tablet-20 20%
5) col-25 tablet-25 25%
6) col-30 tablet-30 30%
7) col-33 tablet-33 33.3%
8) col-35 tablet-35 35%
9) col-40 tablet-40 40%
10) col-45 tablet-45 45%
11) col-50 tablet-50 50%
12) col-55 tablet-55 55%
13) col-60 tablet-60 60%
14) col-65 tablet-65 65%
15) col-66 tablet-66 66.6%
16) col-70 tablet-70 70%
17) col-75 tablet-75 75%
18) col-80 tablet-80 80%
19) col-85 tablet-85 85%
20) col-90 tablet-90 90%
21) col-95 tablet-95 95%
22) col-100 tablet-100 100%
23) col-auto tablet-auto Equal width

例



   
      
      
      
      Layout Grid
      
              
      
   
   
      

         

         
            

               

                  
Layout Grid

               

            
        
            

               

                  

                     
Columns with gutter
                     
                   

                        

                           
col 1

                           
col 2

                        
   
                        

                           
col 1

                           
col 2

                           
col 3

                           
col 4

                        
                  
                        

                           
col 1

                           
col 2

                           
col 3

                        
                       
                        
Columns without gutter
                      
                        

                           

                              
col 1

                              
col 2

                           

                           
                           

                              
col 1

                              
col 2

                              
col 3

                              
col 4

                           
           
                           

                              
col 1

                              
col 2

                              
col 3

                           

                        
        
                        
Nested Columns

                        

                           

                              
                              

                                 col 1
                                 

                                    
col 2

                                    
col 3

                                 

                              
                               
                              

                                 col 1
                                 

                                    
col 2

                                    
col 3

                                 

                              
                          
                           

                        
                 
                        
Columns With Different Equal Width
                          
                           

                           

                              
col 1

                              
col 2

                           
                         
                           

                              
col 1

                              
col 2

                              
col 3

                              
col 4

                           
                          
                           

                              
col 1

                              
col 2

                              
col 3

                              
col 4

                           

                        
                           
                        
Columns With Equal Width
                           
                        

                           

                              
col-1

                              
col-2

                              
col-3

                              
col-4

                           

                              
                           

                              
col-1

                              
col-2

                              
col-3

                              
col-4