Bootstrap4：如何在导航图标上方添加内容？

首先看你的代码，核心问题是嵌套了两个<nav>标签，这打乱了Bootstrap导航栏的默认布局逻辑，同时你没有把要添加的内容和toggle按钮放在同一个容器里，导致没法让内容出现在图标上方。

我帮你调整了代码结构，不仅修复了嵌套问题，还实现了在导航图标上方添加内容的需求：

<nav class="navbar navbar-dark bg-dark">
  <!-- Logo 部分 -->
  <a class="navbar-brand text-light" href="#">
    <img src="logo.png" width="30" height="30" alt=""> My Photos
  </a>

  <!-- 导航图标及上方内容容器 -->
  <div class="d-flex flex-column align-items-end">
    <!-- 这里是你要添加在图标上方的内容 -->
    <span class="text-white mb-1">Menu</span>
    
    <!-- Toggle 按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>

  <!-- 折叠内容部分 -->
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h3 class="text-white h3 ">Contact</h3>
      <span class="text-white">Follow on Twitter</span>
      <p class="text-white">Like on Facebook</p>
      <p class="text-white">Email me</p>
    </div>
  </div>
</nav>

关键改动说明： #

• 移除了内层的<nav>标签，所有元素都放在同一个外层<nav>中，符合Bootstrap导航栏的结构规范
• 创建了一个d-flex flex-column align-items-end的容器，把要添加的内容和toggle按钮放进去：
  • d-flex：启用flex布局
  • flex-column：让容器内的元素垂直排列（内容在上，按钮在下）
  • align-items-end：让元素靠右对齐，和原来的按钮位置保持一致
• 把折叠内容部分直接放在外层nav里，确保toggle按钮能正确控制它的显示/隐藏

你可以把<span class="text-white mb-1">Menu</span>替换成你想要的任何内容，比如文字、小图标等，调整mb-1这个margin类可以控制内容和按钮之间的间距。

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