twitter-bootstrap Bootstrap 水平下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24985065/
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
Bootstrap horizontal dropdown-menu?
提问by No Name
I'd like a bootstrap dropdown menu where the links are horizontal. Unfortunately, I'm having trouble with getting the width correct. The only way I can seem to make it happen is set the min-width to some arbitrary number. I'd like to do this responsively.
我想要一个引导程序下拉菜单，其中链接是水平的。不幸的是，我无法正确设置宽度。我似乎可以实现的唯一方法是将最小宽度设置为某个任意数字。我想以响应方式执行此操作。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.dropdown-menu>li>a {
display: inline;
}
.dropdown-menu {
min-width: 500px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Drop it
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="http://google.com">Google</a>
<a href="http://facebook.com">Facebook</a>
</li>
</ul>
</div>回答by eirenaios
Your Problem solved Horizontal List
您的问题已解决水平列表
html
html
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Drop it</button>
<ul class="dropdown-menu" role="menu">
<li> <a href="http://google.com">Google</a>
</li>
<li> <a href="http://facebook.com">Facebook</a>
</li>
</ul>
</div>
css
css
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.dropdown-menu > li {
display: inline-block;
float:left;
}
.open > ul {
display: inline-flex !important;
}
