Bootstrap 4 Navbar不会回退

Question

我在导航栏中使用了bootstrap 4，可以很好地按下汉堡包按钮，但不能在菜单上重新切换它，它仍然处于折叠状态。那么如何将其切换回其菜单？

我在每个导航项上都尝试过data =“ collapse”，也许它可以工作，但仍处于折叠状态。

    .nav-fill .nav-item {
      -webkit-box-flex: initial;
      flex: initial;
      text-align: initial;
    }

    ul li a.nav-link {
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 0.02em;
    }

    .navigation .bg-light{
      background-color: transparent !important;
    }

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
      <div class="container">
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar10">
                                <span class="navbar-toggler-icon"></span>
                            </button>
        <div class="collapse navbar-collapse" id="navbar10">
          <ul class="navbar-nav nav-fill w-100">
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Codeply</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

fyi：我将导航栏放在标题下（因为需要），是这样吗？

header{
  display: flex !important;
  flex-direction: column;
}

 /*** HEADER *****/

.logo-wrapper img {
  width: 100%;
  display: block;
}
.logo-wrapper {
  width: 100%;
  display: block;
  position: relative;
}

/* Navbar */
.nav-fill .nav-item {
  -webkit-box-flex: initial;
  flex: initial;
  text-align: initial;
}

header {
  background: url(../images/header_img.png) no-repeat top center transparent;
  padding: 0 0;
  background-attachment: inherit;
  background-size: cover;
}

.header-bottom {
  padding: 20px 0;
}

ul li a.nav-link {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.navigation .bg-light{
  background-color: transparent !important;
}

<header>
          <div class="header-bottom">
            <div class="container">
              <div class="row">
                <div class="icon-call col-md-4 col-xs-12 d-none d-md-block ">
                    <a href="#"><img src = "images/icon-call.png">xoxoxox</a>                    
                </div>

                <div class="col-md-4 col-xs-12 col-sm-12">    
                  <div class="logo-wrapper">         
                    <a href=""><img src = "images/logo.png" ></a> 
                  </div>
                </div>

                <div class="icon-social col-md-4 col-xs-12 d-none d-md-block">
                  <div class="social-media text-right">
                    <a href="#"> <img src = "images/icon-fb.png" > </a>
                    <a href="#"> <img src = "images/icon-mail.png"> </a>
                    <a href="#"> <img src = "images/icon-insta.png"> </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="navigation">
                  <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container">
                        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar10">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse text-center" id="navbar10">
                            <ul class="navbar-nav nav-fill w-100">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Services</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Results</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">References</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Contact</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
          </div>
    </header>

Answer 1

您的代码工作正常，但请尝试正确使用所有链接，如下所示

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

header{
  display: flex !important;
  flex-direction: column;
}

 /*** HEADER *****/

.logo-wrapper img {
  width: 100%;
  display: block;
}
.logo-wrapper {
  width: 100%;
  display: block;
  position: relative;
}

/* Navbar */
.nav-fill .nav-item {
  -webkit-box-flex: initial;
  flex: initial;
  text-align: initial;
}

header {
  background: url(../images/header_img.png) no-repeat top center transparent;
  padding: 0 0;
  background-attachment: inherit;
  background-size: cover;
}

.header-bottom {
  padding: 20px 0;
}

ul li a.nav-link {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.navigation .bg-light{
  background-color: transparent !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <header>
          <div class="header-bottom">
            <div class="container">
              <div class="row">
                <div class="icon-call col-md-4 col-xs-12 d-none d-md-block ">
                    <a href="#"><img src = "images/icon-call.png">xoxoxox</a>                    
                </div>

                <div class="col-md-4 col-xs-12 col-sm-12">    
                  <div class="logo-wrapper">         
                    <a href=""><img src = "images/logo.png" ></a> 
                  </div>
                </div>

                <div class="icon-social col-md-4 col-xs-12 d-none d-md-block">
                  <div class="social-media text-right">
                    <a href="#"> <img src = "images/icon-fb.png" > </a>
                    <a href="#"> <img src = "images/icon-mail.png"> </a>
                    <a href="#"> <img src = "images/icon-insta.png"> </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="navigation">
                  <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container">
                        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar10">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse text-center" id="navbar10">
                            <ul class="navbar-nav nav-fill w-100">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Services</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Results</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">References</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Contact</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
          </div>
    </header>