Bootstrap导航栏子菜单不显示、箭头方向及布局调整问题求助

问题1：Bootstrap 4 中“More Help”箭头方向与点击行为修正 #

箭头改为向右 #

覆盖 Bootstrap 4 默认下拉箭头样式，将其改为向右：

/* 替换默认向下箭头为向右 */
.dropdown-toggle::after {
  border-top: none;
  border-left: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: .3em solid transparent;
}

点击时主菜单不关闭、子菜单正常显示 #

主菜单关闭是因为事件冒泡触发了 collapse 组件的关闭逻辑，阻止事件冒泡即可修复：

$('.dropdown-toggle').on('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡到父级折叠组件
  $(this).dropdown('toggle'); // 手动触发下拉菜单切换
});

问题2：Bootstrap 5 菜单优雅对齐（File居左，Security/Help居右） #

放弃硬编码 margin，利用 Bootstrap 5 内置 flex 工具类实现：
将导航项拆分为左右两个容器，给右侧容器添加 ms-auto 类实现自动右对齐：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <!-- 左侧菜单 -->
    <div class="navbar-nav">
      <a class="nav-link" href="#">File</a>
    </div>
    <!-- 右侧菜单，ms-auto 自动右对齐 -->
    <div class="navbar-nav ms-auto">
      <a class="nav-link" href="#">Security</a>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Help</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Help Center</a></li>
          <li><a class="dropdown-item" href="#">More Help</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

若需两端对齐，给父容器添加 justify-content-between 类即可：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid d-flex justify-content-between">
    <div class="navbar-nav">
      <a class="nav-link" href="#">File</a>
    </div>
    <div class="navbar-nav">
      <a class="nav-link" href="#">Security</a>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Help</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Help Center</a></li>
          <li><a class="dropdown-item" href="#">More Help</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

问题3：菜单中添加居中文本 #

利用 flex 布局工具类，让中间文本容器占满剩余空间并居中：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid d-flex align-items-center">
    <!-- 左侧菜单 -->
    <div class="navbar-nav">
      <a class="nav-link" href="#">File</a>
    </div>
    <!-- 居中文本，flex-grow-1 占满剩余空间 -->
    <div class="flex-grow-1 text-center">
      <span class="navbar-text">当前页面标题</span>
    </div>
    <!-- 右侧菜单 -->
    <div class="navbar-nav">
      <a class="nav-link" href="#">Security</a>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Help</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Help Center</a></li>
          <li><a class="dropdown-item" href="#">More Help</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Bootstrap 4 环境下，只需将 data-bs-toggle 改为 data-toggle，其余代码可直接复用。

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