为什么我的Bootstrap导航栏在移动设备上仅显示logo、其余元素隐藏

问题根因 #

你使用的是Bootstrap框架的navbar-expand-lg类，该类预设规则为：仅在屏幕宽度≥992px的桌面端尺寸下展开导航栏内容，小于该宽度的移动设备上，collapse类会默认隐藏#navElements容器内的所有社交媒体图标。你未添加配套的折叠菜单触发按钮，所以移动端仅能显示logo元素。

解决方案 #

提供两种可选修复方案，按需选择即可：

方案1：全尺寸直接显示所有导航元素（无折叠逻辑） #

无需添加额外按钮，所有屏幕尺寸下都直接展示右侧社交媒体图标，仅需修改nav标签的类属性：
将原代码中<nav>标签的navbar-expand-lg替换为navbar-expand，即可让导航栏始终保持展开状态。

方案2：保留折叠逻辑，添加汉堡菜单按钮 #

如果希望移动端默认隐藏图标，点击按钮后再展开，补充汉堡触发按钮即可，完整修改后的HTML代码如下：

<!-- NavBar -->
<nav data-aos="fade-down" class="navbar navbar-expand-lg navbar-light bg-transparent">
  <a class="navbar-brand" href="#"><img src="assets/img/logo_light.png" alt="Ionut Logo" class="navbar-logo"></a>
  <!-- 新增汉堡触发按钮 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navElements" aria-controls="navElements" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navElements">
    <ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navRight">
      <li class="nav-item">
        <a class="fab fa-github nav-icon" target="_blank" href="#"></a>
      </li>
      <li class="nav-item">
        <a class="fab fa-instagram nav-icon" target="_blank" href="#"></a>
      </li>
      <li class="nav-item">
        <a class="fab fa-facebook nav-icon" target="_blank" href="#"></a>
      </li>
    </ul>
  </div>
</nav>
<!-- End of Nav Bar -->

附加优化建议 #

你当前CSS中设置的左右边距为10rem，在移动端尺寸下会占用过多空间，可添加媒体查询适配小屏幕：

.navbar-logo {
    width: 93.75px;
    height: 23.5px;
    margin-left: 10rem;
}

.navbar-right-space {
    margin-right: 10rem;
}

.nav-icon {
    color: #fff;
    text-decoration: none;
    font-size: 26px;
    transition: 0.5s;
}

.nav-icon:hover {
    font-size: 28px;
    color: #fff;
}

#navRight .nav-item {
    margin-left: 10px;
}

#navElements {
    margin-top: 0.75rem;
}

#navRight {
    margin-right: 10rem;
}

/* 新增移动端边距适配 */
@media (max-width: 991.98px) {
    .navbar-logo {
        margin-left: 1rem;
    }
    #navRight {
        margin-right: 1rem;
    }
    /* 若选择方案2可添加以下代码修改汉堡按钮颜色为白色适配透明背景 */
    .navbar-toggler-icon {
        filter: brightness(0) invert(1);
    }
}

问题原始截图 #

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