jquery - 使用 Bootstrap 创建多个列表下拉菜单

Question

我正在尝试使用最新版本的 Bootstrap 创建下拉导航栏。我想创建一个下拉列表，其中我在下拉列表中有两个单独的列表，垂直相邻(类似于 this website 上的空气净化器下拉列表|

Bootstrap 好像只支持horizontal dividers眼下。有谁知道我可以用来解决这个问题的 css/html hack？

Answer 1

请参阅此 fiddle :http://jsfiddle.net/manishie/CVYq6/

基本上，您采用常规 Bootstrap 下拉菜单并将其从 ul 更改为 div。但是你保持类名不变。在那个 div 中，你可以拥有任何你想要的东西。

在这种情况下，您需要两个并排的列表，但您可以有图像或任何您想要的 html。

Bootstrap 处理类名，因此当您单击切换按钮时，.dropdown-menu 类中的任何内容都会出现。

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:

.dropdown-menu ul {
    float: left;
}

.dropdown-menu ul:first-of-type {
    border-right: 1px solid black;
    padding-right:20px
}
​