📜  如何使用引导程序将一列列表拆分为不同的行?

📅  最后修改于: 2021-08-30 09:49:16             🧑  作者: Mango

BootStrap是用于前端 Web 开发的最流行、免费和开源的 CSS 框架。 BootStrap 4是正在使用的最新版本。 BootStrap 4 提供了广泛的组件、内容、布局和实用程序。 Bootstrap 4 提供了一个网格系统,它使用一系列容器、行和列来布局和对齐内容。网格系统允许用户创建具有自定义规格的网格。网格系统采用 flexbox 构建,完全响应,可以根据屏幕大小调整列大小。容器是 Bootstrap 中最基本的布局元素,在使用网格系统时需要它。可以使用 BootStrap 的网格系统将列表的列拆分为行。 BootStrap 的 ‘row’ 和 ‘col’ 类可以将任何区域分成行和列。以下代码可用于使用 BootStrap 将列表的一列拆分为不同的行。
考虑以下列表:

  • 第 1 行
  • 第 2 行
  • 第 3 行
  • 第 4 行

示例 1:在此示例中,我们使用嵌套的行和列将列表的列拆分为行。



    
        Splitting List Into Columns
  
        
        
  
        
        
    
    
        
            

Column

            
                
                    
                        
Row 1
                    
                    
                        
Row 2
                    
                    
                        
Row 3
                    
                    
                        
Row 4
                    
                
            
        
    

输出:

示例 2:在此示例中,我们通过在

  • 标签中添加 class 属性将列表的列拆分为行。

    
    
        
            Splitting List Into Columns
            
      
            
        
        
            
                

    Column

                
                      
    • Row 1
    •                 
    • Row 2
    •                 
    • Row 3
    •                 
    • Row 4
    •             
            
        

    输出:

    示例 3:在此示例中,我们通过嵌套划分将列表的列拆分为行。

    
    
        
            Splitting List Into Columns
            
      
            
        
        
            
                

    Column

                
    Row 1
                
    Row 2
                
    Row 3
                
    Row 4
            
        

    输出