drop-down-menu - twitter bootstrap - 多列下拉菜单

Question

我正在尝试创建一个 twitter 引导下拉菜单，其中包含 7-36 个菜单项。不幸的是，有这么多项目，我只能看到前 15 个左右。在创建新列之前，我希望能够拆分项目数，以便每列不超过 10 个。

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

Answer 1

我通过在设置列数和下拉宽度的地方添加类“列”来解决它。当然，您可以根据媒体查询设置列数和宽度。

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 2

你可以使用 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 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>

我必须添加最小宽度，否则第三列会溢出右边距：

.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产品。

（如果你用愚蠢的声音说“超级菜单”会有所帮助）

一次不错的产品是YAMM或YAMM3（取决于您使用的Bootstrap版本）。

Answer 5

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

看看： http: //www.devlifeline.com/2013/09/multi-column-bootstrap-dropdown.html

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