bootstrap + 而不是列表中的下拉列表我想要下拉列表中的 X 列

Question

这是我的Fiddle。

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

我希望能够在超过 1 列（比如说 5 列）或页面宽度中呈现此列表。

我希望在引导 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>

EDIT1

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

假设您可以在第二个示例中设置下拉列表的宽度，请尝试将 display: inline-block 添加到下拉列表 li 元素中。

.dropdown-menu li {
  display: inline-block;
}

Here's your fiddle 进行更改。但是，这会影响您的第二个下拉列表，因此您可能需要在第一个下拉列表中添加一个自定义类，如果这是您想要应用这些特定更改的唯一一个。

Answer 2

您可以使用 btn-gropus 中的下拉菜单来执行此操作。 见：http://getbootstrap.com/components/#btn-groups-nested

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