问题描述
CSS:
F<T>
现在,我在.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 20px;
width: 100%;
}
.megamenu > div > li > ul {
padding: 0;
margin: 0;
}
.megamenu > div > li > ul > li {
list-style: none;
}
.megamenu > div > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu > div > li > ul > li > a:hover,.megamenu > div > li > ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,.megamenu.disabled > a:hover,.megamenu.disabled > a:focus {
color: #999999;
}
.megamenu.disabled > a:hover,.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.megamenu .dropdown-header {
color: #428bca;
font-size: 18px;
}
.megamenu .container{
background-color:#f4f4f4;
}
@media (max-width: 768px) {
.megamenu {
margin-left: 0;
margin-right: 0;
}
.megamenu > li {
margin-bottom: 30px;
}
.megamenu > li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header {
color: #fff;
}
}
中添加container
和row
以显示第4列。因此将ul
添加到col-md-3
中,但实际上row
无效,我在col-md-3
上看到空白。
HTML:
container
我该如何解决此问题?
图片问题:
解决方法
问题是导航栏中的容器设置为display:flex
,因此您需要通过添加flex-grow-1
或w-100
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 20px;
width: 100%;
}
.megamenu > div > li > ul {
padding: 0;
margin: 0;
}
.megamenu > div > li > ul > li {
list-style: none;
}
.megamenu > div > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu > div > li > ul > li > a:hover,.megamenu > div > li > ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,.megamenu.disabled > a:hover,.megamenu.disabled > a:focus {
color: #999999;
}
.megamenu.disabled > a:hover,.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.megamenu .dropdown-header {
color: #428bca;
font-size: 18px;
}
.megamenu .container{
background-color:#f4f4f4;
}
@media (max-width: 768px) {
.megamenu {
margin-left: 0;
margin-right: 0;
}
.megamenu > li {
margin-bottom: 30px;
}
.megamenu > li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header {
color: #fff;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="fixed-top navbar navbar-light bg-light navbar-expand-md justify-content-center">
<div class="container">
<a class="navbar-brand" href="/"> Brand </a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a>
</li>
<li class="dropdown menu-large nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Categories </a>
<ul class="dropdown-menu megamenu">
<div class="container">
<div class="row flex-grow-1">
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a>
</li>
<li class="disabled"><a href="#">How to use</a>
</li>
<li><a href="#">Examples</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a>
</li>
<li><a href="#">Aligninment options</a>
</li>
<li><a href="#">Headers</a>
</li>
<li><a href="#">Disabled menu items</a>
</li>
</ul>
</li>
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a>
</li>
<li><a href="#">Button toolbar</a>
</li>
<li><a href="#">Sizing</a>
</li>
<li><a href="#">Nesting</a>
</li>
<li><a href="#">Vertical variation</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li><a href="#">Single</a>
</li>
</ul>
</li>
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a>
</li>
<li><a href="#">Sizing</a>
</li>
<li><a href="#">Checkboxes</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a>
</li>
<li><a href="#">Pills</a>
</li>
<li><a href="#">Justified</a>
</li>
</ul>
</li>
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a>
</li>
<li><a href="#">Buttons</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Non-nav links</a>
</li>
<li><a href="#">Component alignment</a>
</li>
<li><a href="#">Fixed to top</a>
</li>
<li><a href="#">Fixed to bottom</a>
</li>
<li><a href="#">Static top</a>
</li>
<li><a href="#">Inverted navbar</a>
</li>
</ul>
</li>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>