如何使Bootstrap 4下拉菜单在多个列中以及整个屏幕上显示？

Question

How to make Bootstrap 4 dropdown-menu in several cols and on the whole screen this way:

Basically, I want to have drop-down menu several columns and be the width of the whole container. How to make this possible?

 #mainmenu { font-size: 1.1rem; background-color: #e3f2fd; } .dropdown-menu { min-width: 200px; } .dropdown-menu.columns-2 { min-width: 400px; } .dropdown-menu.columns-3 { min-width: 600px; } .dropdown-menu li a { padding: 5px 15px; font-weight: 300; } .multi-column-dropdown { list-style: none; } .multi-column-dropdown li a { display: block; clear: both; line-height: 1.428571429; color: #333; white-space: normal; } .multi-column-dropdown li a:hover { text-decoration: none; color: #262626; background-color: #f5f5f5; } @media (max-width: 767px) { .dropdown-menu.multi-column { min-width: 240px !important; overflow-x: hidden; } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <nav id="mainmenu" class="navbar navbar-expand-md navbar-light bg-light "> <a id="" class="navbar-brand invisible" href="#">Action</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="mainNavbar"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Action</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Action</a> </li> <li class="nav-item dropdown"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" d="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">Action</a> <ul class="dropdown-menu multi-column columns-3 "> <div class="row"> <div class="col-sm-4"> <ul class="multi-column-dropdown"> <li> <a href="#"> <h5>Action</h5> </a> </li> <div class="dropdown-divider"></div> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </div> <div class="col-sm-4"> <ul class="multi-column-dropdown"> <li><a href="#">Action</a></li> <div class="dropdown-divider"></div> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </div> <div class="col-sm-4"> <ul class="multi-column-dropdown"> <li><a href="#">Action</a></li> <div class="dropdown-divider"></div> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </div> </div> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Action</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Action</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Action</a> </li> </ul> </div> </nav> 

Here's what I got. Basically, I want to have drop-down menu several columns and be the width of the whole container. How to make this possible?

Answer 1

Give the parent a static position:

<li class="nav-item dropdown has-megamenu">

Css:

.dropdown.has-megamenu{
position:static;
}

And don't forget to put your row of columns inside a .container-fluid classed div:

<div class="container-fluid"> <div class="row">