twitter引导 – 多列下拉列表
我试图创build一个介于7-36个菜单项之间的twitter引导程序下拉菜单。 不幸的是，有很多项目，我只能看到前15个左右。 我希望能够分割项目的数量，以便每列不超过10，在创build新列之前。
我不是试图做嵌套的下拉列表，我只是试图改变下拉列表，以便每列不超过10个项目，但所有的项目仍然应该显示。 我试着把每一个li放到他们自己的div，但是这不符合HTML我认为。 是否有可能通过TBS做到这一点？
你可以使用Bootstrap的.row-fluid来完成你所需要的。
我已经为下拉菜单的宽度内联了CSS，但是您可以指定一个类/ ID并将其包含在样式表中。
基本上，这里发生的是：
- 我们正在下拉菜单中创build一个stream体网格
- 为下拉容器本身设置固定的宽度
-
li标签从父级下拉菜单inheritance他们的风格
以下示例仅在Chrome v23中进行了testing
* 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>
[编辑]
* 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>
我已经通过添加类“列”来解决它，我已经设置了列数和下拉宽度。 当然，您可以根据媒体查询设置列数和宽度。
https://jsfiddle.net/maciej_p/eatv1b4b/18/
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：
@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; } }
我调整了代码以适应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>
我不得不添加最小宽度，否则第三列溢出右边距：
.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; }
也看看在那里的兆丰菜单产品。
（如果你用愚蠢的声音说' 超级菜单 '会有帮助）
一次像样的产品是YAMM或YAMM3 （取决于您使用的Bootstrap版本）。
我有一个最近的post，展示了如何通过改变多列下拉的宽度和改变stream体行中跨度的数量来容易地修改2列以适应您的需要。
检查出来： http : //www.devlifeline.com/2013/09/multi-column-bootstrap-dropdown.html
仅供参考 – 这使风格与其他引导下拉菜单保持一致
