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

问题描述

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

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.

我不是想做嵌套的下拉列表，我只是想改变下拉列表的表现，所以每列不超过10个项目所有项目仍应显示。我试着把每10个 li s放在自己的div中，但是我甚至认为不符合HTML。可以通过TBS进行此操作吗？

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?

推荐答案

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

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

我已经下划线了CSS下拉菜单的宽度，但你可以指定一个类/在您的样式表中。

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:

• 我们在下拉列表中创建一个流体网格


• 设置下拉容器本身的固定宽度


• li 标签从父级下拉列表继承自己的风格



下面的示例仅在Chrome v23中进行测试

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>

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