17370845950

本文详解如何在 bootstrap 中正确实现嵌套网格（nested grid），解决因遗漏父级 `.row` 或列宽计算错误导致的卡片错位、高度不一致等问题，并提供可直接运行的结构化代码示例。

在 Bootstrap 中构建类似「左侧 8 列模块区 + 右侧 4 列日程区」的响应式双栏布局时，关键在于*严格遵循“行（.row）→ 列（`.col-）→ 行（嵌套.row）→ 列”的层级结构**。初学者常犯的错误包括：在列内直接放置新列（缺少嵌套.row）、列宽总和超出 12、未统一卡片尺寸导致视觉参差，或混淆col-3与col-4` 的语义逻辑。

✅ 正确做法如下：

• 外层容器：使用 保证居中与响应式间距；
• 主行布局： 下划分为 col-8（模块区）与 col-4（日程区）；
• 嵌套行必须显式声明：每个 .col-* 内若需多列排列，必须包裹一层新的 .row —— Bootstrap 的栅格系统依赖 .row 重置负边距（margin: 0 -15px）并触发 flex 布局，否则子列会继承外层列的 padding，造成错位或宽度溢出；
• 列宽需整除 12：例如在 col-8 区域内展示 3 卡/行，应使用 col-4（3 × 4 = 12），而非 col-3（3 × 3 = 9，剩余 3 列空白，破坏对齐）；同理，col-4 区域内两列并排应使用 col-6（2 × 6 = 12）；
• 保持卡片一致性：为避免高度不一影响网格流，建议为 .card 设置最小高度（如 min-height: 200px）或启用 Bootstrap 5+ 的 h-100 类，配合 d-flex flex-column 确保内容区域拉伸。

以下是修复后的完整、可运行代码（基于 Bootstrap 5.3）：

  
  
  
  


  
    
      
      
        
Modules
        
           
            
            
              
                @@##@@
                
                  
Module A
                  
Description here.
                
              
            
            
              
                @@##@@
                
                  
Module B
                  
Description here.
                
              
            
            
              
                @@##@@
                
                  
Module C
                  
Description here.
                
              
            

            
            
              
                @@##@@
                
                  
Module D
                  
Description here.
                
              
            
            
              
                @@##@@
                
                  
Module E
                  
Description here.
                
              
            
            
              
                @@##@@
                
                  
Module F
                  
Description here.
                
              
            
          
        
      

      
      
        
Schedule
        
          
            
              @@##@@
              
                
Event A
                
9:00–10:30
              
            
          
          
            
              @@##@@
              
                
Event B
                
11:00–12:30
              
            
          
        
      
    
  

  

? 注意事项总结：

• ❌ 错误示范：… → 缺少中间 .row，必然错位；
• ✅ 正确嵌套：…；
• 使用 g-*（如 g-3）替代旧版 mx-n2 手动控制间隙，更简洁可靠；
• 图片建议添加 object-fit: cover 和固定高度，防止拉伸变形；
• 在小屏幕（如手机）下，col-8/col-4 会自动堆叠为 100% 宽度，如需保持并排，请使用响应式断点类（如 col-md-8 col-md-4）。

掌握嵌套网格的核心原则——「有列必有行，有行必归 12」，即可稳定构建任意复杂度的 Bootstrap 布局。