Bootstrap Navbar折叠后未以列表形式显示的问题求助

我帮你搞定这个问题！问题的核心是你在<ul>标签上的类名写错了——你写的是class="navbar nav"，但Bootstrap要求导航列表必须使用navbar-nav类才能正确渲染垂直折叠的列表样式，nav类默认是水平布局的，所以折叠后才会挤成一行。

具体修改步骤 #

• 找到你的<ul>标签，把class="navbar nav"改成class="navbar-nav"
• 可以额外给navbar-nav添加flex-column flex-md-row组合类，确保小屏幕折叠时垂直排列，大屏幕展开时自动变回水平布局，适配响应式需求

修正后的完整Navbar代码 #

<!-- Navbar -->
<nav class="navbar navbar-light navbar-expand-md bg-dark">
  <a href="#" class="navbar-brand"><i class="fas fa-child text-warning fa-2x"></i></a>
  <button type="button" class="navbar-toggler bg-light" data-toggle="collapse" data-target="#nav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-between" id="nav">
    <ul class="navbar-nav flex-column flex-md-row">
      <li class="nav-item">
        <a class="nav-link text-light font-weight-bold text-uppercase px-3" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light font-weight-bold text-uppercase px-3" href="#">Skills</a>
      </li>
      <li class="nav-item dropdown" data-toggle="dropdown">
        <a class="nav-link text-light font-weight-bold text-uppercase px-3 dropdown-toggle" href="#">Projects</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Project 1</a>
          <a class="dropdown-item" href="#">Project 2</a>
          <a class="dropdown-item" href="#">Project 3</a>
          <a class="dropdown-item" href="#">Project 4</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light font-weight-bold text-uppercase px-3" href="#">Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light font-weight-bold text-uppercase px-3" href="#">Contact</a>
      </li>
    </ul>
    <form class="form-inline">
      <div class="input-group">
        <input type="text" name="" placeholder="Search" class="form-control">
      </div>
      <div class="input-group-append">
        <button class="btn">
          <i class="fas fa-search text-muted"></i>
        </button>
      </div>
    </form>
  </div>
</nav>
<!-- End of navbar -->

额外优化提示 #

如果觉得折叠后的列表项间距太近，可以自定义CSS调整垂直间距：

@media (max-width: 767px) {
  .navbar-nav .nav-item {
    margin-bottom: 0.5rem; /* 根据需求调整间距大小 */
  }
}

这样修改后，点击toggle按钮时，折叠的Navbar就会以整齐的垂直列表形式展示啦！

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