Html 整个导航栏随下拉菜单展开_Html_Css_Bootstrap 4_Navbar

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

html css bootstrap-4

Html 整个导航栏随下拉菜单展开,html,css,bootstrap-4,navbar,Html,Css,Bootstrap 4,Navbar,我正在尝试为我的导航栏创建一个自定义断点，以便它以1080px的速度更改为汉堡包菜单。但是，当我单击下拉菜单时，整个导航栏将展开 @media (min-width: 1080px){ .navbar-expand-custom { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-custom .navbar-nav { flex-direc

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

@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

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

请尝试使用下面的代码段。实际上，问题是你们想让下拉菜单占据1080px以下的空间，但在1080px以上你们想让它成为绝对值，这样导航栏就不会被扩展

@介质（最小宽度：1080px）{
.navbar扩展自定义{
弯曲方向：行；
柔性包装：nowrap；
调整内容：灵活启动；
}
.navbar展开自定义.navbar导航{
弯曲方向：行；
}
.navbar展开自定义.navbar导航.nav链接{
填充权：.5rem；
左侧填充：.5rem；
}
.导航栏展开自定义.导航栏折叠{
显示：flex！重要；
}
.navbar展开自定义.navbar切换程序{
显示：无；
}
.navbar展开自定义.navbar导航下拉菜单{
位置：绝对位置；
}
}

Humble suggestion了解断点是如何工作的，然后尝试用自己的方式创建菜单。最终可能会有很多类覆盖引导css。

<!-- 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>