如何在 Bootstrap 中创建不相等的列？

Bootstrap 是 Twitter 创建的响应式框架。它用于创建响应式站点。它有一个预定义的类和设计。在 Bootstrap 中，我们可以在不编写代码的情况下将预定义的类添加到代码中。我们还有一个预定义的“.col”类来创建列。

网格布局系统：整个工作屏幕（桌面、平板电脑、手机）被分成 12 个大小相等的行。我们可以使用“col-number”类（预定义）来制作不相等的列，其中数字决定了该列的比例/大小，并且该数字应小于或等于 12。

在引导程序中实现不等列的分步指南：

步骤 1：在所有其他样式表之前将 Bootstrap 和 jQuery CDN 包含到 标签中以加载我们的 CSS。

第 2 步：添加具有.col-3和.col-6类的类以具有不等分的列。

第 3 步：添加带有 class container-fluid 的

标签，并添加另一个带有 class .row 的

以在一行中包含所有不相等的列。

示例 1：以下示例将创建不等列长度的 25%/50%/25% 拆分。

HTML

  

    
    
    
    
    
    
    
    
    

  

    
        
  
            
            
            col-3
            col-6
            col-3
        
    

  

输出：

25% /50%/ 25% 分割

示例 2：在下面的示例中，我们使用了两个col元素，每个元素的宽度为 50%，列的长度相等。 Bootstrap 将识别存在多少元素并相应地创建等宽列。

HTML

  

  
    
    
    
    
    
    
    
    
    

  

    
        
  
            
            
            col
            col
        
  
        
  
            
            
            col-3
            col-6
            col-3
        
    

  

输出：

第 1 行：- 50%/50% 拆分，第 2 行：- 25%/50%/25% 拆分