提问人：Alfonzo 提问时间：11/10/2017 更新时间：11/10/2017 访问量：425
mega 下拉列表不会全宽，但会停留在触发的 <li> 的容器内
mega dropdown will not go full width but stays within the container of the <li> that triggered
问：
我正在使用 Twitter Bootstrap，并希望有许多下拉子菜单。问题是我希望我的“mega-dropdown-menu”是页面宽度的 100%，而所有其他菜单都需要保持在 180px。目前，巨型下拉菜单要么受触发它的元素的宽度限制，要么受所有普通下拉菜单使用的默认宽度（180px）的限制。<li>
我试过在“mega-dropdown menu”类上使用 ！important。我还尝试删除宽度并将左右设置为“自动”。当我只使用 100% 时，它由父级包含<li>
我还想让箭头看起来指向触发大型下拉菜单的。<li>
.container {
width:100% !important;
padding: 0px;
margin: 0px;
}
/*START MEGA MENU CSS*/
.dropdown-menu {
width: 150px !important;
background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15
*/
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.dropdown-menu>li>a {
color: #fff !important;
}
.dropdown-header1 {
font-size:16px;
font-weight:bold !important;
color: #F58220 !important;
padding-left: 17px !important;
}
.navbar-nav>li>.dropdown-menu {
margin-top: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-default .navbar-nav>li>a {
width: 150px;
font-weight: bold;
}
.mega-dropdown {
position: relative !important;
width: 180px;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 1000px !important;
left:auto;
right:auto;
overflow:visible;
box-shadow: none;
-webkit-box-shadow: none;
background-color:#000000;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #43464b;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 0px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #43464b;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 0px;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #fff;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #000;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 1.2em;
font-weight: bold;
}
.mega-dropdown-menu form {
margin: 3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
.divider {
border-bottom:dotted 1px #ccc !important;
}
正如你所看到的，HTML 是相当标准的：
我将不胜感激对此的任何意见，因为它让我发疯！如果我的方法还很顺利，很高兴重新开始？不过分担心它在移动设备上的处理方式，因为我将在较小的设备上隐藏大型菜单并替换为香草“下拉菜单”。
<!-- Navigation -->
<!-- Fixed navbar -->
<nav id="header" class="navbar navbar-fixed-top">
<div id="header-container" class="container navbar-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="brand" class="navbar-brand" href="/"><img src="https://www.inciner8.com/images/full-logo-white.png" width="160" height="25"></a>
</div>
<div id="navbar" class="collapse navbar-collapse pull-right">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="#incinerators" class="dropdown-toggle" data-toggle="dropdown">INCINERATORS <b class="caret"></b></a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Most Popular</li>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=i8M-60+Medical" class="img-responsive" alt="product 1"></a>
<h4><small>Self-contained Medical Incinerator</small></h4>
<button class="btn btn-primary" type="button">GET a Quote</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> more info...</button>
</div>
<!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=Large+Capacity" class="img-responsive" alt="product 2"></a>
<h4><small>Our Flagship 1 Tonne Incinerator</small></h4>
<button class="btn btn-primary" type="button">GET a Quote</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> more info...</button>
</div>
<!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=Dual+Chamber" class="img-responsive" alt="product 3"></a>
<h4><small>Hot Hearth Designed Dual Chamber Pet Cremator</small></h4>
<button class="btn btn-primary" type="button">GET a Quote</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> more info...</button>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">PET CREMATION <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dual Chamber Pet Cremator <span class="badge badge-important pull-right">New!</span></a></li>
<li><a href="#">Horse Cremator</a></li>
<li><a href="#">Heat Exchangers</a></li>
<li><a href="#">Pet Cremation Accessories</a></li>
<li class="divider"></li>
<li class="dropdown-header1">Want to learn more?</li>
<li><a href="#">Starting a Pet Crematorium</a></li>
<li><a href="#">Pet Cremation Business Plan</a></li>
<li><a href="#">Pet Cremation Business Franchise</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">WASTE TO ENERGY <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">EFW-40</a></a></li>
<li><a href="#">EFW-20</a></li>
<li><a href="#">Heat Exchangers</a></li>
<li><a href="#">Organic Ranking Cycle Engine</a></li>
<li class="divider"></li>
<li class="dropdown-header1">Want to learn more?</li>
<li><a href="#">What is W2E?</a></li>
<li><a href="#">Use Incinerators to Create Electricity</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">POLLUTION CONTROL <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Small PCS</a></li>
<li><a href="#">Large PCS</a></li>
<li><a href="#">Venturi Scrubber</a></li>
<li class="divider"></li>
<li class="dropdown-header1">Want to learn more?</li>
<li><a href="#">Ceramic Filters</a></a></li>
<li><a href="#">Activated Carbon Filters</a></li>
<li><a href="#">Lime Feed</a></li>
<li><a href="#">What are Acceptable Emission Levels?</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">INCINERATION <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">How it Works</a></a></li>
<li><a href="#">Types of Incinerator</a></li>
<li><a href="#">What you Can/Cannot Burn</a></li>
<li><a href="#">Legislation</a></li>
<li class="divider"></li>
<li class="dropdown-header1">Want to Learn More?</li>
<li><a href="#">Read our Blog...</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SUPPORT <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Download Brochures & Datasheets <span class="badge badge-important pull-right">New!</span></a></li>
<li><a href="#">Emissions Quick Reference</a></li>
<li><a href="#">Fuel Consumption Quick Reference</a></li>
<li><a href="#">Dealer Resources</a></li>
<li class="divider"></li>
<li class="dropdown-header1">Useful Resources</li>
<li><a href="#">Visit our <strong>spare parts website</strong></a></li>
<li><a href="#">Activate your Warranty</a></li>
<li><a href="#">Become a Dealer</a></li>
<li><a href="#">Become a Dealer</a></li>
<li class="divider"></li>
<li class="dropdown-header1">FREE Waste Audit Templates <span class="badge badge-important pull-right">New!</span></li>
<li><a href="#">Waste Audit</a></li>
<li><a href="#">Waste Logbook</a></li>
<li><a href="#">Medical Waste Logbook</a></li>
<li><a href="#">Animal Waste Logbook</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">ABOUT <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Company History</a> <span class="badge badge-important pull-right">New!</span></li>
<li><a href="#">Awards & Accreditations</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Our Values</a></li>
</ul>
</li>
<li><a href="#contact" class="btn-primary" type="button">CONTACT</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav>
<!-- /.navbar -->
答： 暂无答案
评论