下拉引导程序+而不是列表我想从下拉菜单中选择X列列表

问题描述：

在Dropdown1下是一列操作列表，显示在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%; 
}

但他控制的下拉区域，我juest需要展开的行动，以填补该区域。

EDIT2

another可能的方式，但这种存在其自身的问题

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

[略有相关]（http://jsfiddle.net/A7MYE/4/） – HattrickNZ

尝试[this]（http://jsfiddle.net/faxyz/4/）方法来控制下拉区域的大小，但可以得到它的工作 – HattrickNZ

答

可以使用BTN-gropus内的下拉列表中做到这一点。请参阅：http://getbootstrap.com/components/#btn-groups-nested

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

不认为这将工作为我想要的。我只想要1个下拉列表，然后一旦点击5列，就会显示出来，而不是当前的1列列表。 – HattrickNZ

答

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

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

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

下拉引导程序+而不是列表我想从下拉菜单中选择X列列表

相关推荐