本文详解如何在 bootstrap 中正确实现嵌套网格（nested grid），解决因未遵循“row → col → row → col”层级规范导致的卡片错位、宽度不均等问题，并提供可运行的结构化代码示例。

在 Bootstrap 中构建嵌套网格系统时，一个常见误区是忽略其严格的容器嵌套规则：所有列（.col-*）必须直接置于 .row 内，而 .row 又必须置于 .container 或另一个 .col-* 中。若在列内部直接放置新列（如

✅ 正确嵌套结构原则

• 外层容器：.container → .row（主行）
• 主行内分栏：.col-8（左侧模块区） + .col-4（右侧日程区）
• 每个 .col-* 内部如需多列布局，必须先添加 .row，再在其下放置子 .col-*
• 列宽总和应为 12（如 col-4 + col-4 + col-4 = 12；col-6 + col-6 = 12），确保单行内自动水平排列

? 完整可运行示例（Bootstrap 5+）

  
  
  
  


  
    
      
      
        
Modules
        
          
          
            
              
                @@##@@
                
                  
模块一
                  
描述文字
                
              
            
            
              
                @@##@@
                
                  
模块二
                  
描述文字
                
              
            
            
              
                @@##@@
                
                  
模块三
                  
描述文字
                
              
            

            
            
              
                @@##@@
                
                  
模块四
                  
描述文字
                
              
            
            
              
                @@##@@
                
                  
模块五
                  
描述文字
                
              
            
            
              
                @@##@@
                
                  
模块六
                  
描述文字
                
              
            
          
        
      

      
      
        
Schedule
        
          
            
              @@##@@
              
                
日程一
                
9:00–10:30
              
            
          
          
            
              @@##@@
              
                
日程二
                
11:00–12:30
              
            
          
        
      
    
  

  

⚠️ 关键注意事项

• *禁止跳过 .row 直接嵌套 `.col-`**：这是最常导致布局崩溃的原因；
• 使用 g-3（gap）替代手动 mt-2：语义更清晰，响应式更可靠；
• 统一卡片高度：添加 h-100 类 + d-flex flex-column，使卡片内容区域自适应并底部对齐；
• 图片适配：通过 style="height: ...; object-fit: cover;" 防止拉伸变形；
• 移动端友好：Bootstrap 默认响应式断点（如 col-8 在所有屏幕生效），如需响应式调整，改用 col-md-8、col-lg-6 等。

✅ 总结

Bootstrap 的嵌套网格不是“任意嵌套”，而是有明确的 DOM 层级契约：.row 是列的唯一合法父容器。只要严格遵守「外层 row → 子列 → 子列内新建 row → 新 row 下置子列」这一模式，即可稳定构建任意复杂度的响应式网格布局。调试时建议使用浏览器开发者工具检查元素是否被正确包裹在 .row 中——这是快速定位嵌套失效问题的黄金法则。