Bootstrap导航栏溢出问题：固定5rem高度时内容超出求解

问题根源 #

手动给Navbar设置固定高度后，内部默认的上下内边距、元素垂直对齐逻辑没适配，导致内容超出容器；如果是fixed定位的Navbar，Bootstrap自动给body加的顶部内边距也没同步更新，双重原因引发内容重叠。

具体解决办法 #

1. 让Navbar内部元素垂直居中+缩减内边距 #

给Navbar加个自定义类，用flex布局强制内部元素居中，同时把品牌、导航链接的上下padding改小，避免撑破高度：

/* 自定义Navbar样式 */
.tall-navbar {
  height: 5rem;
  display: flex;
  align-items: center; /* 核心：垂直居中所有内部元素 */
}

/* 调整内部元素的内边距，适配新高度 */
.tall-navbar .navbar-brand,
.tall-navbar .nav-link {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

HTML里把这个类加上：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark tall-navbar">
  <!-- 你的Navbar内容：brand、toggle、导航链接等 -->
</nav>

2. 同步body的顶部内边距（针对fixed定位的Navbar） #

如果你的Navbar用了fixed-top，Bootstrap默认给body加的padding-top是基于默认Navbar高度的，现在高度改了，得手动同步：

body {
  padding-top: 5rem; /* 和你的Navbar高度完全一致 */
}

3. 重置子元素的默认margin #

有些Navbar组件比如折叠按钮自带上下margin，会挤得内容溢出，直接重置：

.tall-navbar .navbar-toggler {
  margin-top: 0;
  margin-bottom: 0;
}

4. 退而求其次：用min-height代替height（可选） #

如果不需要严格固定高度，只是想要至少5rem的高度，换成min-height更稳妥，既满足高度需求，又不会因为内容多而溢出：

.tall-navbar {
  min-height: 5rem;
}

验证步骤 #

1. 给Navbar加上自定义类，应用对应的CSS
2. 检查导航链接、品牌图标是不是都垂直居中了
3. 如果是fixed定位，确认body的padding-top和Navbar高度匹配
4. 刷新页面，溢出问题应该就解决了

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