Bootstrap中如何将页面元素放置在固定/粘性导航栏下方避免重叠

问题根源 #

你的导航栏使用了fixed-top类，该类会将导航栏设置为position: fixed固定在视口顶部，元素会脱离正常文档流，不占据页面布局空间，因此后续所有页面内容默认从视口最顶部开始渲染，就会被导航栏遮挡，跨路由跳转的页面也会出现同样的重叠问题。

可选解决方案 #

方案1：全局添加顶部间距（Bootstrap官方推荐方案） #

在全局CSS中给body标签添加与导航栏高度匹配的顶部内边距即可，Bootstrap默认尺寸下导航栏高度为56px，直接添加如下样式：

body {
  padding-top: 56px;
}

因为你给导航栏内的元素加了fs-4类放大了字号，导航栏实际高度会高于默认值，可以适当调大padding-top的数值，比如调到70px，直到内容完全显示在导航栏下方即可。
该方案一次配置就能覆盖所有页面，不需要给每个单独的内容块加间距，适配路由场景最方便。

方案2：给主内容区加顶部间距 #

如果不想修改全局body样式，可以把所有页面内容（包括路由渲染的组件、你写的按钮模块）统一包裹在主内容容器中，给容器添加Bootstrap自带的顶部间距类：

// 根组件结构示例
<header className="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> 
  <a className="navbar-brand px-3 fs-4" href="/">Todos</a>
  <div className="collapse navbar-collapse" id="navbarSupportedContent">
    <ul className="navbar-nav mr-auto">
      <li className="nav-item active">
        <Link className="nav-link fs-4" to="/about">List <span className="sr-only"></span></Link>
      </li>
      <li className="nav-item active px-3 fs-4">
        <Link className="nav-link" to="/homepage"> Add <span className="sr-only"></span></Link>
      </li>
    </ul>
  </div>
</header>

{/* 所有页面内容统一放在main容器内 */}
<main className="mt-5 pt-2">
  {/* 路由出口位置 */}
  <div className="mbtn"> 
    <button onClick={() => setType('books')} className="btn btn-outline-primary">Пользователи</button>
  </div>
</main>

如果使用后仍有轻微遮挡，把间距类mt-5替换为数值更大的类，或者直接写内联样式style={{marginTop: '70px'}}调整即可。

问题效果参考 #

导航栏遮挡内容的问题截图

注意事项 #

• 不需要删除fixed-top类，删除后导航栏会随页面滚动消失，失去固定导航的作用
• 做响应式适配时，可以通过媒体查询针对不同屏幕尺寸调整顶部间距，适配移动端导航折叠/展开的高度变化

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