我一直在尝试调整＆＃34; Big Dropdown＆＃34; midmenu就在实际导航项目的正下方，而不是像现在一样打开屏幕外，很确定我只是错过了一些东西但是想以最干净的方式实现这一点。
HTML
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
id="navbarDropdown" role="button">Big Dropdown</a>
<ul class="dropdown-menu megamenu midmenu ">
<div class="row">
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
CSS
nav.main .megamenu {
padding: 20px 20px;
position: absolute;
top: auto;
left: 0;
right: 0;
max-width: 1500px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
nav.main .midmenu {
position: absolute;
padding: 20px 20px;
float: left;
top: auto;
left: auto;
right: auto;
max-width: 650px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
Codepen - 请参阅＆＃34; Big Dropdown＆＃34;
https://codepen.io/GH5ST/pen/GGgWPK
答案 0 :(得分：3)
这对我有用，我给了一个新的大课程，并调整了margin和absolute位置。 （复制并粘贴到您的Codepen中试试）：
<nav class="sub">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="d-flex align-items-center">
<div class="dropdown mr-2">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Website
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="https://www.google.com">Action</a>
<a class="dropdown-item" href="https://www.google.com">Another action</a>
<a class="dropdown-item" href="https://www.google.com">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Country
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<button class="btn btn-outline-secondary btn-sm ml-auto">Search</button>
<div class="dropdown ml-2">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
My Account
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown ml-2">
<button class="btn btn-outline-secondary btn-sm" type="button">
1-800-MELISSA
</button>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light main bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Mega Dropdown</a>
<ul class="dropdown-menu megamenu">
<div class="row">
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Big Dropdown</a>
<ul class="dropdown-menu bigmenu ">
<div class="row">
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Normal Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
CSS：
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800|Roboto:300,400,400i,500,500i,700");
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
header .container-fluid {
max-width: 1500px;
width: 100%;
}
/* Navigation Sub
------------------------------------- */
nav.sub {
border-bottom: 1px solid #ebebeb;
padding: 10px 0;
}
/* Navigation Main
------------------------------------- */
nav.main {
}
nav.main .nav-logo {
max-width: 200px;
width: 100%;
}
nav.main ul {
padding-left: 0;
list-style-type: none;
}
/* ------ Mega Menu ------ */
nav.main .megamenu {
padding: 20px 20px;
position: absolute;
top: auto;
left: 0;
right: 0;
max-width: 1500px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* ------ Mid Menu ------ */
nav.main .midmenu {
position: absolute;
padding: 20px 20px;
float: left;
top: auto;
left: auto;
right: auto;
max-width: 650px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
nav.main .bigmenu {
padding: 20px 20px;
position: absolute;
top: auto;
left: ;
right: 0;
max-width: 800px;
width: 100%;
margin-left: 50em;
margin-right: auto;
}
答案 1 :(得分：1)
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800|Roboto:300,400,400i,500,500i,700");
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
header .container-fluid {
max-width: 1500px;
width: 100%;
}
/* Navigation Sub
------------------------------------- */
nav.sub {
border-bottom: 1px solid #ebebeb;
padding: 10px 0;
}
/* Navigation Main
------------------------------------- */
nav.main {}
nav.main .nav-logo {
max-width: 200px;
width: 100%;
}
nav.main ul {
padding-left: 0;
list-style-type: none;
}
/* ------ Mega Menu ------ */
nav.main .megamenu {
padding: 20px 20px;
position: absolute;
top: auto;
left: 0;
right: 0;
max-width: 1500px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* ------ Mid Menu ------ */
nav.main .midmenu {
position: absolute;
padding: 20px 20px;
float: left;
top: auto;
left: auto;
right: auto;
max-width: 650px;
width: 100%;
margin-left: auto;
margin-right: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<header>
<nav class="navbar navbar-expand-lg navbar-light main bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Mega Dropdown</a>
<ul class="dropdown-menu megamenu">
<div class="row">
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Big Dropdown</a>
<ul class="dropdown-menu megamenu midmenu ">
<div class="row">
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Normal Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<nav class="sub">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="d-flex align-items-center">
<div class="dropdown mr-2">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Website
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="https://www.google.com">Action</a>
<a class="dropdown-item" href="https://www.google.com">Another action</a>
<a class="dropdown-item" href="https://www.google.com">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Country
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<button class="btn btn-outline-secondary btn-sm ml-auto">Search</button>
<div class="dropdown ml-2">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
My Account
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown ml-2">
<button class="btn btn-outline-secondary btn-sm" type="button">
1-800-MELISSA
</button>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>