Question

我正在尝试创建一个介于7-36个菜单项之间的twitter bootstrap下拉列表。不幸的是，有很多项目，我只能看到前15个左右。在创建新列之前，我希望能够分割项目数，使每列不超过10个。

我不是要尝试嵌套下拉菜单，我只是想更改下拉列表的显示方式，以便每列不超过10个项目，但仍应显示所有项目。我尝试将每10个li放入他们自己的div中，但我认为这甚至不符合HTML。是否可以通过TBS实现这一目标？

Answer 1

您可以使用Bootstrap的.row-fluid来完成您的需要。

我已经为下拉菜单的宽度内联了css，但您可以指定一个类/ ID并将其包含在样式表中。

基本上，这里发生的是：

我们正在下拉列表中创建一个流畅的网格
为下拉容器本身设置固定宽度
li代码会从父下拉列表继承其风格

以下示例仅在Chrome v23中进行了测试

* 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>

Answer 2

我通过添加类“列”解决了这个问题，我设置了列数和下拉宽度。当然，您可以根据媒体查询设置列数和宽度。

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;
    }
}

Answer 3

我调整了代码以适应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>

我必须添加最小宽度，否则第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;
}

Answer 4

还可以查看 Mega Menu 产品。

（如果您说“ Mega菜单＆＃39;愚蠢的话语会有帮助”

一旦合适的产品是YAMM或YAMM3（取决于您使用的Bootstrap版本）。

Answer 5

我最近发布了一篇文章，展示如何通过更改多列下拉列表的宽度和更改流体行中的跨距数来轻松修改2列，以满足您的需求。

检查出来：http://www.devlifeline.com/2013/09/multi-column-bootstrap-dropdown.html

仅供参考 - 这使样式与其他引导下拉菜单保持一致

Answer 6

查看此插件，它对您有用。

http://alijafarian.com/bootstrap-multi-column-dropdown-menu/

twitter bootstrap - 多列下拉列表

6 个答案: