Bootstrap表单滚动时form-row与导航栏重叠问题求助

方法1：用Bootstrap内置间距类快速解决 #

Bootstrap的fixed-top导航栏会脱离文档流，导致下方内容被覆盖。直接给<body>或者表单所在容器加Bootstrap的顶部间距类就行，比如pt-5（内边距）或mt-5（外边距），数值可以根据导航栏高度调整：

<body class="pt-5">
  <!-- 顶部固定导航栏 -->
  <nav class="navbar fixed-top">...</nav>
  <!-- 表单容器 -->
  <div class="container">
    <form>
      <div class="form-row">
        <!-- 表单字段 -->
      </div>
    </form>
  </div>
</body>

方法2：自定义CSS精准适配导航栏高度 #

如果你的导航栏是自定义高度，写CSS更靠谱：

/* 假设导航栏高度是80px，设置比它稍大的内边距避免紧贴 */
body {
  padding-top: 85px;
}

也可以单独给表单容器加外边距：

.form-wrapper {
  margin-top: 85px;
}

方法3：换用sticky-top替代固定定位（可选） #

如果不需要导航栏全程固定在顶部，把导航栏的fixed-top换成sticky-top就行——这个类会让导航栏在滚动到顶部时固定，否则随页面滚动，自然不会出现重叠问题：

<nav class="navbar sticky-top">...</nav>

额外提示 #

• fixed-top自带position: fixed属性，这是内容重叠的核心原因——固定定位元素不占据文档流空间，所以下方内容会往上跑。
• 如果导航栏在移动端是折叠状态（高度变小），可以用媒体查询适配不同屏幕：

@media (max-width: 768px) {
  body {
    padding-top: 65px; /* 对应移动端导航栏高度 */
  }
}

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