是否有一种方法可以使父div“ .primaryNav”（在示例中以红色背景显示）像在移动设备视图上一样，将我的水平下拉菜单包含在MD到XL视图中，所以它也包含在其中。
[当前，我需要向.mainNav类添加边距以增加容器高度，以使背景颜色和阴影与子导航的底部对齐，并且其下方的内容被向下推。问题是，当没有潜水艇时，则表明容器太高且有缝隙。
目标是使.primaryNav div增长并自动包含子导航，并向下压主要内容区域
#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/[email protected]/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>
是否有一种方法可以使父div“ .primaryNav”（在示例中以红色背景显示）像在移动设备视图中一样，将我的水平下拉菜单包含在MD到XL视图中？目前，我需要...
您是否尝试过
如果要像在移动设备中一样在MD到XL断点中折叠水平菜单，则可以使用.navbar-expand-*类。