使用 Bootstrap 创建多个列表下拉菜单答案

【问题标题】：Creating Multiple List Dropdown Menu with Bootstrap使用 Bootstrap 创建多个列表下拉菜单
【发布时间】：2012-11-05 17:40:44
【问题描述】：

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

目前看来，Bootstrap 只支持horizontal dividers。有谁知道我可以用来解决这个问题的 css/html hack？

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

看到这个小提琴：http://jsfiddle.net/manishie/CVYq6/

基本上，您使用常规引导下拉菜单并将其从 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
}

【讨论】：

funny aria-labelledby="dLabel" 引用了此处或小提琴中未显示的标签:)
好点。我从引导站点复制了一些代码并对其进行了修改以回答问题。不知何故被留在了那里。我已将其删除并更新了我的答案。谢谢！

【解决方案2】：

我相信这个功能还没有开箱即用。

Related issue on github.

您可以尝试破解它并手动注入列，或者根本不使用引导程序。

如果你需要这个菜单，你可以试试 mega menu 或flexbox

【讨论】：