下拉菜单 – twitter启动 – 多列下拉列表

发布时间：2020-12-18 00:07:13 所属栏目：安全来源：网络整理

导读：我试图创建一个介于7-36个菜单项之间的twitter引导下拉菜单。不幸的是，有很多项目，我只能看到前15个左右。我想要能够分割项目的数量，以便在创建新列之前每列不超过10个。我不想尝试嵌套的下拉列表，我只是试图更改下拉列表的显示，以便每列不超过10项，

我试图创建一个介于7-36个菜单项之间的twitter引导下拉菜单。不幸的是，有很多项目，我只能看到前15个左右。我想要能够分割项目的数量，以便在创建新列之前每列不超过10个。

我不想尝试嵌套的下拉列表，我只是试图更改下拉列表的显示，以便每列不超过10项，但所有项目仍应该显示。我试着把每10个lis到自己的div，但是这不是甚至HTML兼容我想。是否可以通过TBS做到这一点？

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!