如何让项目被丢弃，而不是并排出现在导航栏中- bootstrap 4

在Bootstrap 4中，如果你希望某个项目在导航栏中被丢弃，而不是与其他项目并排显示，你可以使用dropdown组件来实现这一点。具体来说，你可以将该项目包装在一个dropdown容器内，并使用dropdown-toggle和dropdown-menu类来定义下拉菜单。

以下是一个简单的示例代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

在这个示例中，dropdown类用于将项目包装在一个下拉菜单容器内，dropdown-toggle类用于定义触发下拉菜单的链接，而dropdown-menu类用于定义下拉菜单的内容。

优势

空间节省：通过将项目放入下拉菜单，可以节省导航栏的空间，特别是在移动设备上。
组织性：将相关项目分组到一个下拉菜单中，可以提高导航栏的组织性和可读性。
交互性：用户可以通过点击下拉菜单来访问更多选项，提供更好的用户体验。

应用场景

多级导航：适用于需要多级导航的场景，例如网站的主菜单、子菜单等。
移动设备优化：在移动设备上，下拉菜单可以更好地适应屏幕大小，提供更好的用户体验。
功能模块分组：将相关的功能模块分组到一个下拉菜单中，使导航栏更加整洁和有序。

可能遇到的问题及解决方法

下拉菜单不显示：
- 确保你已经正确引入了Bootstrap的CSS和JS文件。
- 确保你已经正确使用了dropdown、dropdown-toggle和dropdown-menu类。
- 确保你的HTML结构正确，特别是data-toggle="dropdown"和aria-haspopup="true"属性。