[英]How to make Bootstrap header item and dropdown-menu the same width?
I have this header in my Bootstrap template: 我的Bootstrap模板中有以下标头:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
//Some unrelated stuff
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
//Some unrelated stuff
</ul>
<ul class="nav navbar-nav pull-right-custom">
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">DDButtonText <strong class="caret"></strong></a>
<ul class="dropdown-menu">
Test
</ul>
</li>
</ul>
</div>
</div>
</nav>
What I'm trying to accomplish is to make the dropdown menu the same width as the 'DDButtonText' thing. 我要完成的工作是使下拉菜单的宽度与“ DDButtonText”的宽度相同。 I tried setting min-width to dropdown-menu but it was different for each browser. 我尝试将min-width设置为dropdown-menu,但对于每个浏览器来说都不同。 It was alright in my Firefox but Chrome and other browsers showed a little different sizes. 在我的Firefox中还可以,但是Chrome和其他浏览器显示的尺寸略有不同。
How do I make my menu be the same size as the button regardless of browser, always? 无论浏览器如何,如何始终使菜单的大小与按钮的大小相同?
You can try adding this: 您可以尝试添加以下内容:
CSS : CSS :
.nav .dropdown-menu{
width: 100%;
min-width: inherit;
}
Bootply : http://www.bootply.com/MfkTjxasD7 Bootply : http : //www.bootply.com/MfkTjxasD7
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.