twitter-bootstrap 如何增加导航栏下拉菜单的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18506218/
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 do I increase the width of a navbar dropdown?
提问by Matt
I'm using bootstrap and trying to put a search form inside a navbar dropdown menu, but I'm finding the form looks squashed because the width of the dropdown is too small. Also, the form elements are not how I would like. How do I fix this?
我正在使用引导程序并尝试将搜索表单放在导航栏下拉菜单中，但我发现表单看起来被压扁了，因为下拉菜单的宽度太小。此外，表单元素不是我想要的。我该如何解决？
I'm new to CSS and web design in general. Please help!
我是 CSS 和网页设计的新手。请帮忙！
Current layout:
当前布局：
What I'm trying to achieve:
我正在努力实现的目标：
<header class="navbar navbar-inverse navbar-fixed-top navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">Brand</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Locate <b class="caret"></b></a>
<ul class="dropdown-menu">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<button type="button" class="btn btn-default navbar-btn"><li class="icon-screenshot"></li></button>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="btn-group">
<button type="submit" class="btn btn-default">Search</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</form>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">USER <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Link</a></li>
<li><a href="#"><i class="icon-upload"></i> Link</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-signout"></i> Link</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
回答by Avin Varghese
Try this:
试试这个：
.navbar-nav>li>.dropdown-menu { width: yourwidth }
You can add display: inline-blockso that its width will be according to its content automatically
您可以添加display: inline-block使其宽度自动根据其内容
回答by darthsoup
You can increase the "min-width" value in the dropdown.less
您可以在 dropdown.less 中增加“最小宽度”值
or make a new line in the css
或在 css 中创建一个新行
.dropdown-menu { min-width: 200px }
