如何实现Bootstrap汉堡菜单展开后菜单项横向排列？

你的CSS未生效是因为Bootstrap默认给.navbar-nav和.nav-item设置了flex布局规则，优先级高于你写的display: inline。要实现折叠后菜单项横向排列，可使用以下CSS：

@media (max-width: 768px) {
  .navbar-nav {
    flex-direction: row !important; /* 强制改为横向flex排列，覆盖Bootstrap默认样式 */
    gap: 1rem; /* 可选：设置菜单项之间的间距，按需调整 */
  }
  .nav-item {
    display: flex;
    align-items: center; /* 确保图标和提示文本垂直对齐 */
  }
}

关键说明 #

• Bootstrap在移动端默认给.navbar-nav设置了flex-direction: column，所以必须改为row才能实现横向排列
• 添加!important是为了确保样式优先级高于Bootstrap内置样式；如果不想使用!important，可以用更具体的选择器（比如#navbarNav .navbar-nav）来提高优先级
• gap属性用来控制菜单项的间距，可根据实际视觉需求调整数值
• 保持.nav-item为flex布局，能让内部的图标和tooltip文本更好地垂直对齐

完整可运行代码 #

<nav id="mynavbar" class="navbar navbar-expand-lg navbar-dark sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img
        id="Logo"
        src="https://cdn.glitch.global/123df645-7c49-4cd3-b292-825ade4e767b/LogoTrimmedNewFont.png?v=1688645785034"
      />
    </a>
    <button
      class="navbar-toggler custom-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">
            <i class="bi bi-person-vcard"></i>
          </a>
          <h5 class="tooltiptext" style="text-align: left">
            Portfolio
          </h5>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="bi bi-person-check"></i>
          </a>
          <h5 class="tooltiptext" style="text-align:">
            &nbsp; Hiring
          </h5>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="bi bi-diagram-3"></i>
          </a>
          <h5 class="tooltiptext" style="text-align: left">
            &nbsp;&nbsp; Links
          </h5>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="bi bi-envelope"></i>
          </a>
          <h5 class="tooltiptext" style="text-align:">
            &nbsp;Contact
          </h5>
        </li>
      </ul>
    </div>
  </div>
</nav>

<style>
@media (max-width: 768px) {
  .navbar-nav {
    flex-direction: row !important;
    gap: 1rem;
  }
  .nav-item {
    display: flex;
    align-items: center;
  }
}
</style>

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