jquery - bootstrap 中的下拉菜单 + 而不是列表我想要下拉列表中的 X 列列表

Question

这是我的 Fiddle .

Dropdown1 下是一个操作列表，显示在 1 列中。

我希望能够跨多于 1 列(假设为 5 或页面宽度)显示此列表。

我希望在 bootstrap CSS 中有一些 class 可以用来实现这一点，但我可能不得不做一些 CSS。

我怎样才能做到这一点？

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1 <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
  </ul>
</li>

编辑1

this是我想用的:

.dropdown-menu {
    height: 300%;
    width: 400%;
}

但是他控制的是下拉区域，我只需要展开操作来填充这个区域。

EDIT2

another可能的方法，但这会带来自己的问题

ul .dropdown-menu li{
    float: left;
    width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}

Answer 1

您可以使用组间下拉列表来执行此操作。 请参阅:http://getbootstrap.com/components/#btn-groups-nested

注意:使用此方法您必须有 5 个单独的下拉菜单。