twitter-bootstrap twitter bootstrap - 多列下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13562658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap - multi column dropdown
提问by StackOverflowed
I'm trying to create a twitter bootstrap dropdown that has somewhere between 7-36 menu items. Unfortunately with that many items, I can only see the first 15 or so. I'd like to be able to split the number of items so that there are no more than 10 per column, before a new column is created.
我正在尝试创建一个 twitter bootstrap 下拉菜单，其中包含 7-36 个菜单项。不幸的是，有这么多项目，我只能看到前 15 个左右。在创建新列之前，我希望能够拆分项目数，以便每列不超过 10 个。
I'm not trying to do nested dropdowns, I'm just trying to change the presentation of the dropdown so that there are no more than 10 items per column, however all of the items should still be displayed. I tried putting every 10 lis into their own div but that's not even HTML compliant I think. Is it possible to do this via TBS?
我不是要进行嵌套下拉列表，我只是想更改下拉列表的显示方式，以便每列不超过 10 个项目，但仍应显示所有项目。我尝试将每 10li秒放入他们自己的 div 中，但我认为这甚至不符合 HTML 标准。是否可以通过 TBS 执行此操作？
回答by inki
You can use Bootstrap's .row-fluidto accomplish what you need.
您可以使用 Bootstrap.row-fluid来完成您需要的工作。
I've inlined the css for the width of the dropdown menu but you can specify a class/id and include that in your stylesheet.
我已经为下拉菜单的宽度内联了 css，但您可以指定一个类/ID 并将其包含在您的样式表中。
Basically, what's going on here is:
基本上，这里发生的事情是：
- We are creating a fluid grid inside of the dropdown
- Setting a fixed width for the dropdown container itself
- The
litags are inheriting their style from the parent dropdown
- 我们正在下拉菜单中创建一个流体网格
- 为下拉容器本身设置固定宽度
- 该
li标签是从父继承下拉自己的风格
The example below was only tested in Chrome v23
以下示例仅在 Chrome v23 中进行了测试
* Boostrap 2.x:
* Boostrap 2.x：
<ul id="multicol-menu" class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="row-fluid" style="width: 400px;">
<ul class="unstyled span4">
<li><a href="#">test1-1</a></li>
<li><a href="#">test1-2</a></li>
<li><a href="#">test1-3</a></li>
</ul>
<ul class="unstyled span4">
<li><a href="#">test2-1</a></li>
<li><a href="#">test2-2</a></li>
<li><a href="#">test2-3</a></li>
</ul>
<ul class="unstyled span4">
<li><a href="#">test3-1</a></li>
<li><a href="#">test3-2</a></li>
<li><a href="#">test3-3</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
[EDIT]
[编辑]
* Boostrap 3.x:
* Boostrap 3.x：
<ul id="multicol-menu" class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="row" style="width: 400px;">
<ul class="list-unstyled col-md-4">
<li><a href="#">test1-1</a></li>
<li><a href="#">test1-2</a></li>
<li><a href="#">test1-3</a></li>
</ul>
<ul class="list-unstyled col-md-4">
<li><a href="#">test2-1</a></li>
<li><a href="#">test2-2</a></li>
<li><a href="#">test2-3</a></li>
</ul>
<ul class="list-unstyled col-md-4">
<li><a href="#">test3-1</a></li>
<li><a href="#">test3-2</a></li>
<li><a href="#">test3-3</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
回答by maciejp
I've solved it by adding class "columns" where I've set columns count and drop down width. Of course you can set columns count and width depending on media queries.
我通过添加类“列”来解决它，我在其中设置了列数和下拉宽度。当然，您可以根据媒体查询设置列数和宽度。
https://jsfiddle.net/maciej_p/eatv1b4b/18/
https://jsfiddle.net/maciej_p/eatv1b4b/18/
HTML:
HTML：
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">wybierz region<b class="caret"></b></a>
<ul class="dropdown-menu columns">
<li><a href="#"><strong>Górny ?l?sk</strong></a></li>
<li><a href="#">powiat b?dziński</a></li>
<li><a href="#">powiat bielski</a></li>
<li><a href="#">powiat bieruńsko-l?dziński</a></li>
<li><a href="#">powiat cieszyński</a></li>
<li><a href="#">powiat cz?stochowski</a></li>
<li><a href="#">powiat gliwicki</a></li>
<li><a href="#">powiat k?obucki</a></li>
<li><a href="#">powiat lubliniecki</a></li>
<li><a href="#">powiat miko?owski</a></li>
<li><a href="#">powiat myszkowski</a></li>
</ul>
</li>
CSS:
CSS：
@media screen and (max-width: 991px){
.columns{
height: 200px;
overflow-y:scroll;
}
}
@media screen and (min-width: 992px){
.columns{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
width: 500px;
height:170px;
}
}
回答by Roger Jeffs
I adjusted the code to suit Bootstrap 3. For a 3-column dropdown:
我调整了代码以适合 Bootstrap 3。对于 3 列下拉列表：
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1 </a>
<div class="dropdown-menu multi-column">
<div class="row">
<div class="col-md-4">
<ul class="dropdown-menu">
<li><a href="#">Col 1 - Opt 1</a></li>
<li><a href="#">Col 1 - Opt 2</a></li>
</ul>
</div>
<div class="col-md-4">
<ul class="dropdown-menu">
<li><a href="#">Col 2 - Opt 1</a></li>
<li><a href="#">Col 2 - Opt 2</a></li>
</ul>
</div>
<div class="col-md-4">
<ul class="dropdown-menu">
<li><a href="#">Col 2 - Opt 1</a></li>
<li><a href="#">Col 2 - Opt 2</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I had to add the min-width, otherwise the 3rd column overflowed the right margin:
我必须添加最小宽度，否则第 3 列会溢出右边距：
.dropdown-menu.multi-column {
width: 400px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width:100px;
}
回答by Scotty.NET
回答by Eric Uldall
I have a recent post showing how to achieve this for 2 columns that should be easily modified to fit your needs by changing the width of the multi-column dropdown and changing the number of spans in your fluid row.
我最近有一篇文章展示了如何通过更改多列下拉列表的宽度和更改流体行中的跨度数来轻松修改 2 列以满足您的需求。
Check it out: http://www.devlifeline.com/2013/09/multi-column-bootstrap-dropdown.html
检查一下：http: //www.devlifeline.com/2013/09/multi-column-bootstrap-dropdown.html
FYI - This keeps the styles consistent with other bootstrap dropdown menus
仅供参考 - 这使样式与其他引导下拉菜单保持一致
