Bootstrap 4：列间异常间隙的布局对齐问题求助

嘿，作为Bootstrap新手碰到这种布局坑太正常啦！我帮你拆解下问题，再给你靠谱的解决办法～

问题根源分析 #

Bootstrap的栅格系统是靠严格的层级规则工作的：container → row → col，每一层都自带预设的边距/内边距来实现对齐和间距：

• container 左右有padding，用来给内容留边
• row 左右有负margin，刚好抵消container的padding，让里面的col能顶到container的边缘
• col 左右有padding，用来形成列之间的间隙

你之前的两种结构都踩了层级的坑：

1. 第一种（主内容嵌套row）：在col里面又套了row，这个内层row的负margin会把内容往左边拉，导致右边留空白，没法撑满父级col的宽度
2. 第二种（主内容无嵌套但偏移）：大概率是列的栅格分配没做好（比如两个col的宽度加起来没到12），或者层级缺失，导致col的padding和row的负margin没配合好，出现偏移间隙

正确的布局结构 #

按照栅格的层级规则，我们应该把内容整理成这样：

<!-- Jumbotron 之后的 container -->
<div class="container">
  <!-- 唯一的外层row，用来包裹两列 -->
  <div class="row">
    <!-- 左侧列：放置带'hay'的盒子和导航栏 -->
    <div class="col-md-3">
      <div class="your-hay-box">这里是带'hay'的盒子内容</div>
      <nav class="your-nav-bar">这里是导航栏内容</nav>
    </div>
    <!-- 右侧主内容列：直接放置内容，不需要额外嵌套row -->
    <div class="col-md-9 content-body">
      <h1>Getting Started</h1>
      <div class="bd-callout bd-callout-info">
        <h4>Primary Callout</h4>
        This is a primary callout. And some interesting stuff might be occuring here.
        <p> Due to recent events we have taken</p>
      </div>
    </div>
  </div>
</div>

关键要点说明 #

• 确保外层row直接放在container里面，不要跳过层级
• 两个col的栅格数加起来要等于12（比如上面的col-md-3 + col-md-9 = 12），这样就能刚好撑满container的宽度
• 主内容区不需要额外嵌套row，除非你需要在里面再分多个子列——那时候才需要在col里面加row，再放子col

这样调整后，你的布局就能完美对齐，既不会有空白也不会偏移啦！

内容的提问来源于stack exchange，提问作者Coma