我正在尝试为导航栏创建一个自定义断点，以便将其更改为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
<!-- 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标记，它就会停止正常工作。但是，断点可以正常工作。
答案 0 :(得分：0)
尝试使用以下代码段。实际的问题是，您希望下拉菜单使用低于1080px的空间，但希望高于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;
}
.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>