移动端Bootstrap布局列重叠问题咨询及解决方法

我来帮你拆解一下问题所在，以及为什么你的最终解决方案能生效：

问题根源分析 #

你提到添加margin-bottom到第一行后仍有重叠，这大概率是两种情况之一导致的：

• 情况1：使用了固定定位的导航栏
  如果你给导航栏加了fixed-top类（Bootstrap的固定顶部导航栏），它会被设置为position: fixed——这个定位会让元素脱离正常文档流，简单说就是navbar不再占据页面空间，下面的row会直接往上顶，自然和navbar重叠。这时候给第一行加margin-bottom根本没用，因为第一行里的navbar已经“飘”出去了，第一行本身的高度几乎为0。
• 情况2：Row的负margin与Navbar布局冲突
  Bootstrap的.row类默认带有margin-left: -15px和margin-right: -15px，用来抵消container的padding。如果navbar直接放在row的col-12里，再加上你给row加了边框，可能会触发盒模型的高度计算问题，导致视觉上的重叠。

你的解决方案为什么有效？ #

你最终把第二行嵌套进第一行的col-12里，这个做法相当于把navbar和下方内容放在同一个块级容器（col-12）中：

• 普通的navbar是position: relative，它会正常占据页面空间，后面的row会自然排在它下方，不会重叠。
• 嵌套的row会继承col-12的padding，避免了外层row的负margin带来的布局偏移。

另一种更规范的解决方案（针对固定导航栏场景） #

如果你确实需要用固定顶部的导航栏（fixed-top），不需要嵌套row，只需要给<body>添加合适的内边距，让内容避开navbar的高度：

body {
  padding-top: 70px; /* 数值根据你的navbar实际高度调整，默认navbar高度约56px，留些余量用70px即可 */
}

这样既保留了固定导航栏的特性，又不会和内容重叠，结构上也更清晰。

补充：初始代码的优化建议 #

如果不需要固定导航栏，初始代码可以调整成这样，从根源避免重叠：

<div class="container shadow">
  <!-- 导航栏直接放在container里，不需要额外的row和col-12，因为navbar本身是块级元素，默认占满宽度 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- 加mt-3给内容行添加上边距，和navbar拉开距离 -->
  <div class="row mt-3">
    <div class="col-lg-4 col-md-6 card border-0">
      <div class="leftColumn">...</div>
    </div>
    <div class="col-lg-8 col-md-6 card border-0">
      <div class="rightColumn">...</div>
    </div>
  </div>
</div>

Bootstrap的navbar本身就自带全屏宽度的特性，不需要额外用row和col-12包裹，这样也能避免row的负margin带来的潜在问题。

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