Question

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

目前Bootstrap似乎只支持horizontal dividers。有谁知道我可以使用css / html黑客来解决这个问题？

Answer 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
}

Answer 2

我相信这项功能尚未开箱即用。

Related issue on github

您可以尝试破解它并手动注入列，或者只是在不使用引导程序的情况下进行操作。

如果您需要此菜单，可以尝试使用大型菜单或flexbox

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

2 个答案: