Html 如何将 Bootstrap 下拉菜单设置为整页宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23547665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style Bootstrap dropdown-menu to be full page width?
提问by user163831
I need to modify the dropdown-menu provided in Bootstrap, using the navbar-fixed-top, to appear on hover not vertically but horizontally li { display: inline-block }(that's easy), but so I need the actual ul.dropdown-menuto stretch the full width of the page. I can't seem to figure it out.
我需要修改 Bootstrap 中提供的下拉菜单，使用导航栏固定顶部，而不是垂直而是水平地出现在悬停上li { display: inline-block }（这很容易），但是我需要实际ul.dropdown-menu拉伸页面的整个宽度。我似乎无法弄清楚。
Don't give me a megamenu plugin or anything, please, just how can I fix it to stretch the width of the whole page? (not the page container either, the window)
请不要给我一个 megamenu 插件或任何东西，我该如何修复它以拉伸整个页面的宽度？（也不是页面容器，窗口）
Will probably need to wrap another element too, actually, as the ul needs to be centered.
实际上，可能还需要包装另一个元素，因为 ul 需要居中。
So does anyone know how to do this?
那么有谁知道如何做到这一点？
EDIT: Figured it out (like 5 minutes after posting this) and with no added elements:
编辑：想通了（发布后 5 分钟）并且没有添加元素：
.nav { margin-bottom: 0; }
.dropdown { position: static; }
.dropdown-menu { width: 100%; text-align: center; }
.dropdown-menu>li { display: inline-block; }
and there you have it!
你有它！
回答by Hesham Hassan
First you shouldn't wrap the navbar component in a div.container then update the css with the following Code:
首先，您不应将导航栏组件包装在 div.container 中，然后使用以下代码更新 css：
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
display: table-cell;
}
check the demo here http://www.bootply.com/8EgGsi4F7w
回答by Waqar Jamil
<li class="dropdown open" style="position: initial;">
<ul class="dropdown-menu" style="width: 100%;">
just use the position: initial in the main li(dropdown)of your nav and in the child ul dropdown-menu set width 100%
只需使用位置：initial in the main li(dropdown)of your nav and in child ul dropdown-menu set width 100%
回答by Ahmed Elhamahmy
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display: table;
border-radius: 0px;
width: 100%;
text-align: center;
left: 0;
right: 0;
}
.dropdown-menu > li {
display: table-cell;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.dropdown-menu > li {
display: block;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">Blackcat</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Shop</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Artist <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Rich</a></li>
<li><a href="#">Shay</a></li>
<li><a href="#">Jose</a></li>
<li><a href="#">Marie</a></li>
<li><a href="#">Simon</a></li>
<li><a href="#">Jamie</a></li>
<li><a href="#">Andrew</a></li>
<li><a href="#">Teddie</a></li>
</ul>
</li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- end container -->
</div>
<!-- end navbar navbar-inverse navbar-static-top -->
<!-- container -->
<div class="container">
<div class="row">
<p>Site content here...</p>
</div>
<!-- End row -->
</div>
<!-- End container -->