布尔玛 12 列尺寸系统

Bulma 是一个开源 CSS 框架，它提供了预构建的组件，这些组件可以组合在一起以制作响应式网站和 Web 应用程序。在本文中，我们将看到 Bulma 提供的 12 列系统。

Bulma 为我们提供了一个响应式网格系统，其中一个容器分为 12 列，我们可以根据 Bulma 提供的 CSS 类调整内容的大小。

Bulma 12 列系统类：

• is-1：该类用于使一个元素占据12列中的1列宽度。
• is-2：该类用于使一个元素占据12列中2列的宽度。
• is-3：这个类用来让一个元素占据12列中3列的宽度。
• is-4：该类用于使一个元素占据 12 列中的 4 列宽度。
• is-5：该类用于使一个元素占据 12 列中的 5 列宽度。
• is-6：该类用于使一个元素占据12列中6列的宽度。
• is-7：这个类用来让一个元素占据12列中7列的宽度。
• is-8：该类用于使一个元素占据12列中的8列宽度。
• is-9：该类用于使一个元素占据 12 列中的 9 列宽度。
• is-10：该类用于使一个元素占据12列中的10列宽度。
• is-11：该类用于使一个元素占据 12 列中的 11 列的宽度。
• is-12：这个类用来让一个元素占据12列中12列的宽度。

句法：

    
...
    ...

示例：下面的示例说明了 Bulma 提供的 12 个列系统类的使用。

HTML

  

    
    

  

    

        GeeksforGeeks
    
  
    
        Bulma 12 Column System
    
  
    

          
        
        

            

                

                    is-12
                
            
        
  
        
        

            

                

                    is-11
                
            
  
            

                

                    1
                
            
        
  
        
        

            

                

                    is-10
                
            
  
            

                

                    2
                
            
        
  
        
        

            

                

                    is-9
                
            
  
            

                

                    3
                
            
        
  
        
        

            

                

                    is-8
                
            
  
            

                

                    4
                
            
        
  
        
        

            

                

                    is-7
                
            
  
            

                

                    5
                
            
        
  
        
        

            

                

                    is-6
                
            
  
            

                

                    6
                
            
        
  
        
        

            

                

                    is-5
                
            
  
            

                

                    7
                
            
        
  
        
        

            

                

                    is-4
                
            
  
            

                

                    8
                
            
        
  
        
        

            

                

                    is-3
                
            
  
            

                

                    9
                
            
        
  
        
        

            

                

                    is-2
                
            
              
            

                

                    10
                
            
        
    

  

输出：

参考： https://bulma.io/documentation/columns/sizes/#12-columns-system