twitter-bootstrap 使用 Bootstrap 创建多个列表下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13187346/
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
Creating Multiple List Dropdown Menu with Bootstrap
提问by user994585
I'm trying to create a dropdown navbar using the latest version of Bootstrap. I'd like to create a dropdown where I have two separate lists in the dropdown, next to each other vertically (similar to the Air Purifiers dropdown on this website
我正在尝试使用最新版本的 Bootstrap 创建下拉导航栏。我想创建一个下拉列表，其中下拉列表中有两个单独的列表，垂直相邻（类似于本网站上的空气净化器下拉列表）
It seems that Bootstrap only supports horizontal dividersat the moment. Does anyone know of a css/html hack I can use to get around this?
Bootstrap 目前似乎只支持水平分隔符。有谁知道我可以用来解决这个问题的 css/html hack？
回答by manishie
See this fiddle: http://jsfiddle.net/manishie/CVYq6/
看到这个小提琴：http: //jsfiddle.net/manishie/CVYq6/
Basically, you take the regular bootstrap dropdown and change it from a ul to a div. But you keep the class name the same. Within that div, you can have whatever you want.
基本上，您采用常规引导程序下拉列表并将其从 ul 更改为 div。但是你保持类名不变。在那个 div 中，你可以拥有任何你想要的。
In this case you want two side by side lists, but you could have images, or any html you want.
在这种情况下，您需要两个并排的列表，但您可以拥有图像或任何您想要的 html。
Bootstrap works off the class name, so that when you click the toggle, whatever is in the .dropdown-menu class will appear.
Bootstrap 不使用类名，因此当您单击切换按钮时，将显示 .dropdown-menu 类中的任何内容。
HTML:
HTML：
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<div class="dropdown-menu" role="menu">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
<ul>
<li>blah</li>
<li>blah blah</li>
<li>blah blah blah</li>
</ul>
</div>
</div>?
CSS:
CSS：
.dropdown-menu ul {
float: left;
}
.dropdown-menu ul:first-of-type {
border-right: 1px solid black;
padding-right:20px
}
?
