为什么 Bootstrap 导航栏不会在我的代码中崩溃

Question

这是我的引导代码，所以我尝试单独使用导航栏，当最小化它时它会崩溃，但是当我用我的代码添加它时，我做了一些更改，但不是在崩溃部分，所以之后它根本不会崩溃。

<nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="#">WebFit</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse container" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#" id="home">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About us</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Our blogs
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">recipes</a>
                <a class="dropdown-item" href="#">muscles</a>
                <!--<div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">lifestyle</a>
              </div>-->
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">contact us</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0 ">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
    </nav>

Answer 1

您在代码的错误部分添加了一个“容器”类，这导致了问题

如果您删除container，您的导航栏将按原样折叠

<div class="collapse navbar-collapse container" id="navbarSupportedContent">

应该是

<div class="collapse navbar-collapse" id="navbarSupportedContent">

Answer 2

尝试在 ul 标签内添加表单。