整个导航栏随下拉菜单展开答案

【问题标题】：Whole Navbar Expands With Dropdown整个导航栏随下拉菜单展开
【发布时间】：2019-01-01 23:36:02
【问题描述】：

我正在尝试为我的导航栏创建一个自定义断点，以便它更改为 1080 像素的汉堡菜单。但是，当我单击下拉菜单时，整个导航栏会展开。

@media (min-width: 1080px){
.navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
    flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
    display: flex!important;
}
.navbar-expand-custom .navbar-toggler {
    display: none;
}
}

HTML

<!-- Start of Navbar -->
<nav class="navbar navbar sticky-top navbar-toggler navbar-dark bg-dark navbar-expand-custom">
   <a class="navbar-brand" href="#">
   <img src="images/lone-eagle-flying-school-CLIFTON-white.png" height="130" alt="">
   </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" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto">
         <li class="nav-item active">
            <a class="nav-link nav nav-collapsed" href="index.html">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle nav nav-item " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Cameras and Weather
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
               <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">BOM Links</a>
                  <ul class="dropdown-menu">
                     <a class="dropdown-item" href="http://www.bom.gov.au/products/IDR503.loop.shtml#skip" target="_blank">Live Rain Radar</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="http://www.bom.gov.au/australia/charts/msl_36hr_forecast.shtml" target="_blank">Weather Chart Current</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="http://www.bom.gov.au/australia/charts/4day_col.shtml" target="_blank">4 Day Chart</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="http://www.bom.gov.au/jsp/watl/rainfall/pme.jsp" target="_blank">Rain Prognosis</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="http://www.bom.gov.au/watl/wind/forecast.shtml?unit=p0&location=qld2&tz=AEDT" target="_blank">Wind Prognosis</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="http://www.bom.gov.au/aviation/charts/grid-point-forecasts/#" target="_blank">Grid Point Wind</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="http://www.bom.gov.au/aviation/forecasts/arfor/" target="_blank">Area 40 Forecast</a>
                  </ul>
               </li>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="camera link.html">Clifton Airfield Cameras</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IQUEENSL1471" target="_blank">Clifton Weather Station</a>
               <div class="dropdown-divider"></div>
               <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Other Cameras</a>
                  <ul class="dropdown-menu">
                     <a class="dropdown-item" href="http://www.airservicesaustralia.com/WeatherCam/default.html" target="_blank">Toowoomba & Archerfield</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="https://www.warwickgliding.org.au/index.php/about/webcam" target="_blank">Warwick</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="http://www.skycam.net.au/" target="_blank">Skycam Cameras</a>
                  </ul>
               </li>
               <div class="dropdown-divider"></div>
               <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Other Weather Stations</a>
                  <ul class="dropdown-menu">
                     <a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=ITOOWOOM10" target="_blank">Toowoomba</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IOAKEY2" target="_blank">Oakey</a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IQUEENSL673" target="_blank">Dalby</a>
                  </ul>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="http://www.airservicesaustralia.com/aip/current/ersa/FAC_YCFN_24MAY2018.pdf" target="_blank">Clifton ERSA Entry</a>
               </li>
            </ul>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flying Scholarship</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item" href="2018 Winner.html">2018 Winner</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#">Scholarship Photos</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#">Previous Winners</a>
            </div>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Photos & Videos
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item" href="#">Photos</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#">Videos</a>
            </div>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Events/What's New</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item" href="#">1940's Ball</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#">Wellcamp Fly-In</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="https://www.forums.loneeagleflyingschool.org.au/index.php?action=calendar" target="_blank">Club Calender</a>
            </div>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flight Training & FAQ's</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item" href="#">Flight Training</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="FAQ's.html">FAQ's</a>
            </div>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            About Us
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item" href="#">Club History</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#">John Bange History</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#">About The Airfield</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#">Trophies</a>
            </div>
         </li>
         <li class="nav-item">
            <a class="nav-link nav" href="#">Local Attractions</a>
         </li>
         <li class="nav-item">
            <a class="nav-link nav" href="contact us.html">Contact Us</a>
         </li>
         <li class="nav-item">
            <a class="nav-link nav" href="https://forums.loneeagleflyingschool.org.au/" target="_blank">Club Documents</a>
         </li>
      </ul>
   </div>
</nav>

当我使用 .navbar-expand-lg 时，它可以正常工作，但是一旦我告诉它使用 .navbar-expand-custom 标签，它就会停止正常工作。但是，断点可以正常工作。

【问题讨论】：

谦虚的建议了解断点的工作原理，然后尝试以自己的方式创建菜单。您最终可能会得到很多类来覆盖引导 css。

标签： html css bootstrap-4 navbar

【解决方案1】：

尝试使用下面的代码 sn-p。实际上问题是您希望下拉菜单占用低于 1080 像素但高于 1080 像素的空间，您希望它是绝对的，这样导航栏就不会被扩展。

@media (min-width: 1080px) {
  .navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-custom .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-custom .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }
  .navbar-expand-custom .navbar-collapse {
    display: flex!important;
  }
  .navbar-expand-custom .navbar-toggler {
    display: none;
  }
  .navbar-expand-custom .navbar-nav .dropdown-menu {
    position:absolute;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Start of Navbar -->
<nav class="navbar navbar sticky-top navbar-toggler navbar-dark bg-dark navbar-expand-custom">
  <a class="navbar-brand" href="#">
    <img src="images/lone-eagle-flying-school-CLIFTON-white.png" height="130" alt="">
  </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" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item active">
        <a class="nav-link nav nav-collapsed" href="index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle nav nav-item " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Cameras and Weather
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">BOM Links</a>
            <ul class="dropdown-menu">
              <a class="dropdown-item" href="http://www.bom.gov.au/products/IDR503.loop.shtml#skip" target="_blank">Live Rain Radar</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="http://www.bom.gov.au/australia/charts/msl_36hr_forecast.shtml" target="_blank">Weather Chart Current</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="http://www.bom.gov.au/australia/charts/4day_col.shtml" target="_blank">4 Day Chart</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="http://www.bom.gov.au/jsp/watl/rainfall/pme.jsp" target="_blank">Rain Prognosis</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="http://www.bom.gov.au/watl/wind/forecast.shtml?unit=p0&location=qld2&tz=AEDT" target="_blank">Wind Prognosis</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="http://www.bom.gov.au/aviation/charts/grid-point-forecasts/#" target="_blank">Grid Point Wind</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="http://www.bom.gov.au/aviation/forecasts/arfor/" target="_blank">Area 40 Forecast</a>
            </ul>
          </li>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="camera link.html">Clifton Airfield Cameras</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IQUEENSL1471" target="_blank">Clifton Weather Station</a>
          <div class="dropdown-divider"></div>
          <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Other Cameras</a>
            <ul class="dropdown-menu">
              <a class="dropdown-item" href="http://www.airservicesaustralia.com/WeatherCam/default.html" target="_blank">Toowoomba & Archerfield</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="https://www.warwickgliding.org.au/index.php/about/webcam" target="_blank">Warwick</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="http://www.skycam.net.au/" target="_blank">Skycam Cameras</a>
            </ul>
          </li>
          <div class="dropdown-divider"></div>
          <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Other Weather Stations</a>
            <ul class="dropdown-menu">
              <a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=ITOOWOOM10" target="_blank">Toowoomba</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IOAKEY2" target="_blank">Oakey</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IQUEENSL673" target="_blank">Dalby</a>
            </ul>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="http://www.airservicesaustralia.com/aip/current/ersa/FAC_YCFN_24MAY2018.pdf" target="_blank">Clifton ERSA Entry</a>
          </li>
        </ul>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flying Scholarship</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="2018 Winner.html">2018 Winner</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Scholarship Photos</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Previous Winners</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Photos & Videos
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Photos</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Videos</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Events/What's New</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">1940's Ball</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Wellcamp Fly-In</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://www.forums.loneeagleflyingschool.org.au/index.php?action=calendar" target="_blank">Club Calender</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flight Training & FAQ's</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Flight Training</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="FAQ's.html">FAQ's</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        About Us
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Club History</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">John Bange History</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">About The Airfield</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Trophies</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link nav" href="#">Local Attractions</a>
      </li>
      <li class="nav-item">
        <a class="nav-link nav" href="contact us.html">Contact Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link nav" href="https://forums.loneeagleflyingschool.org.au/" target="_blank">Club Documents</a>
      </li>
    </ul>
  </div>
</nav>

【讨论】：