twitter-bootstrap 内联/并排 Bootstrap 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22569294/
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
Inline / Side-by-side Bootstrap dropdown menus
提问by pennstatephil
I'm looking to combine two dropdowns-style lists inline (side-by-side) on a button.
我希望在一个按钮上内联（并排）两个下拉式列表。
So, similar to the example at http://getbootstrap.com/components/#btn-dropdowns-single, but with twomenus inline popping down.
因此，类似于http://getbootstrap.com/components/#btn-dropdowns-single上的示例，但会弹出两个内联菜单。
I know bootstrap has a list-inlineclass (seen in action here: Bootstrap horizontal drop down) but I want vertical lists next to one another, not all items horizontally.
我知道 bootstrap 有一个list-inline类（在这里可以看到：Bootstrap horizontal drop down）但我希望垂直列表彼此相邻，而不是所有项目都是水平的。
What is the magical combination that will allow me to put these vertical lists next to each other in a dropdown?
什么神奇的组合可以让我在下拉列表中将这些垂直列表并排放置？
回答by pennstatephil
After a little more googling, found this article: http://www.devlifeline.com/2013/09/multi-column-bootstrap-dropdown.html
稍微谷歌搜索后，发现这篇文章：http: //www.devlifeline.com/2013/09/multi-column-bootstrap-dropdown.html
HTML
HTML
<ul class="nav">
<li class="dropdown">
<a href="#" data-toggle="dropdown">Dropdown Heading</a>
<div class="dropdown-menu multi-column">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul class="dropdown-menu">
<li><a href="#">Col 1 - Opt 1</a></li>
<li><a href="#">Col 1 - Opt 2</a></li>
</ul>
</div>
<div class="span6">
<ul class="dropdown-menu">
<li><a href="#">Col 2 - Opt 1</a></li>
<li><a href="#">Col 2 - Opt 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
CSS
CSS
.dropdown-menu.multi-column {
width: 400px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
}
Live example:http://bootsnipp.com/snippets/daeN
