有没有一种方法可以让父div".primaryNav"(如示例中红色背景所示(像在移动视图中一样，在MD到XL视图中包含我的水平下拉菜单？
目前，我需要在.mainNav类中添加一个边距，以增加容器的高度，使背景颜色和阴影与子导航的底部对齐，并向下推送其下方的内容。问题是，当没有辅助导航时，集装箱太高，就会有缺口。
目标是让.primaryNavdiv自动增长并包括子导航，向下推主内容区域
#topNav {
letter-spacing: .06rem;
}
#topNav a.nav-link {
padding: 0.05rem 0.5rem;
color: white;
font-weight: 300;
font-size: 0.75rem;
}
#topNav a.nav-link:hover {
text-decoration: underline;
}
#topNav a.nav-link.wpLink {
font-weight: 800;
font-size: .9rem;
}
.primaryNav {
background-color: red;
}
#mainNav .mainSearch .form-control {
border-left: 0;
}
#mainNav .input-group-text {
background-color: white;
border-right: 0;
padding-right: 0;
}
@media (min-width: 576px) {
#mainNav {
font-size: 1rem;
line-height: 1rem;
font-weight: 800;
}
#mainNav .nav-link {
min-height: 65px;
}
}
@media (min-width: 768px) {
#mainNav {
color: #000;
font-weight: 800;
}
#mainNav .nav-link,
#mainNav .nav-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#mainNav,
#mainNav .collapse,
#mainNav .nav-link {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
#mainNav .navbar-nav {
-ms-flex-pack: distribute;
justify-content: space-around;
width: 100%;
}
#mainNav .nav-link span {
-ms-flex-item-align: center;
align-self: center;
}
#mainNav .nav-link:active,
#mainNav .nav-link:focus,
#mainNav .nav-link:hover {
color: black;
border-bottom: 3px solid black;
}
#mainNav .active .nav-link {
border-bottom: 3px solid #0075C9;
}
#mainNav .dropdown {
position: static;
}
#mainNav .dropdown-menu {
display: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
border: none;
padding: 0;
margin: 0;
width: 100%;
border-top: 1px solid grey;
background: white;
}
#mainNav .dropdown-menu.in,
#mainNav .active .dropdown-menu,
#mainNav .dropdown:hover .dropdown-menu {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
#mainNav .dropdown-item {
padding: 1rem 2rem;
width: auto;
}
#mainNav .dropdown-item:hover,
#mainNav .dropdown-item:focus,
#mainNav .dropdown-item.active,
#mainNav .dropdown-item:active {
color: #000;
text-decoration: none;
background-color: #F2F2F2;
}
}
@media (min-width: 1200px) {
#mainNav {
font-size: 1.25rem;
line-height: 1.5rem;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Bootstrap Starter</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- endbuild -->
</head>
<body>
<!-- Top Navigation -->
<div class="container-fluid bg-primary">
<div class="container px-0">
<nav id="topNav" class="navbar navbar-expand navbar-dark text-white px-0 justify-content-lg-end">
<ul class="navbar-nav d-flex ">
<li class="nav-item d-lg-none">
<a class="nav-link wpLink" href="#">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product Registration</a>
</li>
<li class="nav-item d-none d-sm-block">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- Main Navigation -->
<div class="container-fluid primaryNav m-sm-0 mb-sm-3 p-sm-0 border-bottom border-secondary shadow">
<div class="container px-0 mainNav">
<nav id="mainNav" class="navbar navbar-expand-md navbar-light p-0">
<!-- Logo -->
<a class="navbar-brand d-none d-lg-block order-md-first" href="#">
<img class="img-fluid py-2" src="assets/img/waterpik-shower-heads-logo.png">
</a>
<!-- Search Bar -->
<form class="form-inline order-md-last m-0 my-2 my-md-0 flex-grow-1 flex-lg-grow-0">
<div class="input-group mainSearch w-100">
<div class="input-group-prepend">
<span class="input-group-text"></span>
</div>
<input class="form-control form-control-sm" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
<!-- Toggler -->
<button class="navbar-toggler align-self-center" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation -->
<div class="collapse navbar-collapse mx-lg-5" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Home</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Shop Products</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item d-md-none" href="#">Shop All</a>
<a class="dropdown-item" href="#">Hand Held</a>
<a class="dropdown-item" href="#">Fixed Mount</a>
<a class="dropdown-item" href="#">Dual Head</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Shop Products 2</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
<a class="dropdown-item d-md-none" href="#">Shop All</a>
<a class="dropdown-item " href="#">Hand Held 2</a>
<a class="dropdown-item" href="#">Fixed Mount 2</a>
<a class="dropdown-item" href="#">Dual Head 2</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Main Content -->
<main role="main" class="container">
<div class="jumbotron text-center">
<img src="assets/img/logo.png"/>
<h1>Bootstrap 4 Starter Template</h1>
<p class="lead">This example is a quick bootstrap starter template.</p>
<a class="btn btn-lg btn-test" href="https://getbootstrap.com/docs/4.3/getting-started/introduction/" role="button" target="_blank">View Bootstrap 4.1 Docs <i class="fad fa-acorn"></i></a>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>如果您希望您的水平菜单像在移动设备中一样在MD到XL断点中折叠，您可以使用.navbar-expand-*类。
因此，将#mainNav元素中的navbar-expand-md替换为navbar-expand-xl。
<nav id="mainNav" class="navbar navbar-expand-xl navbar-light p-0">
你试过吗
<nav id="topNav" class="navbar navbar-expand-xs navbar-dark text-white px-0 justify-content-lg-end">
这也应该起作用——保留汉堡菜单，这就是你想要实现的吗？我找不到带有primaryNav类的div。