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>

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

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

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

Answer 2

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

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

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

下拉引导程序+而不是列表我想从下拉列表中列出X列

2 个答案: