本文详解 bootstrap 中嵌套栅格的规范用法，指出常见错误（如遗漏外层 `.row`、列宽总和超 12、未重置行间距），并通过结构化代码演示如何实现左侧 8 列模块区（每行 3 张等宽卡片）、右侧 4 列日程区（每行 2 张卡片）的响应式布局。

在 Bootstrap 中构建嵌套栅格系统时，*必须严格遵守“行（.row）→ 列（`.col-）→ 行（.row`）→ 列”的层级结构**。初学者常犯的核心错误包括：

• 在 .col-* 内直接嵌套 .col-*（跳过中间 .row）；
• 子 .row 的子列总宽度超过 12（如使用多个 col-3 但未考虑换行逻辑）；
• 忽略 .row 默认的负边距（margin: 0 -15px），导致内嵌内容溢出或错位；
• 未为多行卡片添加垂直间距（如 mt-2），造成视觉粘连。

以下是一个符合规范、可直接运行的完整示例（基于 Bootstrap 5+）：

  
  
  
  


  
    
      
      
        
Modules
        
          
           
            
              
                @@##@@
                
                  
模块一
                  
描述信息
                
              
            
            
              
                @@##@@
                
                  
模块二
                  
描述信息
                
              
            
            
              
                @@##@@
                
                  
模块三
                  
描述信息
                
              
            
            
            
              
                @@##@@
                
                  
模块四
                  
描述信息
                
              
            
            
              
                @@##@@
                
                  
模块五
                  
描述信息
                
              
            
            
              
                @@##@@
                
                  
模块六
                  
描述信息
                
              
            
          
        
      

      
      
        
Schedule
        
          
            
              @@##@@
              
                
日程一
                
时间：9:00–10:30
              
            
          
          
            
              @@##@@
              
                
日程二
                
时间：11:00–12:30
              
            
          
          
            
              @@##@@
              
                
日程三
                
时间：14:00–15:30
              
            
          
          
            
              @@##@@
              
                
日程四
                
时间：16:00–17:30
              
            
          
        
      
    
  

  

✅ 关键要点总结：

• *每一级 `.col-必须包裹在.row` 内** —— 这是 Bootstrap 栅格系统的强制约束，否则负边距失效，列宽计算异常；
• *使用 `g-类（如g-3）统一控制网格间距**，替代零散的mt-2/mb-2`，提升可维护性；
• 为卡片添加 h-100 并配合 d-flex flex-column，确保多张卡片高度一致，避免参差不齐；
• 图片建议设置 object-fit: cover 和固定高度，防止因原始尺寸差异破坏布局；
• 移动端适配提示：若需在小屏下改为单列堆叠，可将 col-8 / col-4 替换为 col-md-8 / col-md-4，并在 sm 断点自动回退为 col-12。

遵循以上结构与实践，即可稳定实现清晰、响应、易扩展的嵌套栅格布局。