twitter bootstrap - 多列下拉列表 [英] twitter bootstrap - multi column dropdown

问题描述

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

我不是要进行嵌套下拉列表，我只是想更改下拉列表的显示方式，以便每列不超过 10 个项目，但仍应显示所有项目.我尝试将每 10 个 li 放入它们自己的 div 中，但我认为这甚至不符合 HTML 标准.是否可以通过 TBS 执行此操作?

解决方案

你可以使用 Bootstrap 的 .row-fluid 来完成你所需要的.

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

基本上，这里发生的事情是:

• 我们正在下拉菜单中创建一个流体网格
• 为下拉容器本身设置固定宽度
• li 标签从父下拉菜单继承了它们的样式

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

* Boostrap 2.x:

<li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol 菜单 <b class="caret"></b></a><ul class="下拉菜单"><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 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 class="unstyled span4"><li><a href="#">test3-1</a></li><li><a href="#">test3-2</a></li><li><a href="#">test3-3</a></li>

* Boostrap 3.x:

<li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol 菜单 <b class="caret"></b></a><ul class="下拉菜单"><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 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 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>

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.

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?

解决方案

You can use Bootstrap's .row-fluid to accomplish what you need.

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.

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 li tags are inheriting their style from the parent dropdown

The example below was only tested in 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>

[EDIT]

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

这篇关于twitter bootstrap - 多列下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！