1

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

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

4

2 回答 2

2

看到这个小提琴：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
}
​
于 2012-11-02T04:06:19.893 回答
0

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

github 上的相关问题。

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

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

于 2012-11-02T00:27:26.297 回答