Drop down menu twitter引导-多列下拉列表

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

---

我不是在尝试嵌套下拉列表，我只是在尝试更改下拉列表的显示方式，以便每列不超过10个项目，但是所有项目仍应显示。我试着将每10个

li

s放入它们自己的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>

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

[编辑]

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

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

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

请查看：

---

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

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

HTML:

---

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

---

另外，还可以查看那里的大型菜单

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

---

一旦提供了或（取决于您使用的版本）。

如果有人正在寻找bootstrap 1.4解决方案，请使用

class=“row container fluid”

而不是

row fluid

我很惊讶2014年会有人发布bootstrap 1.4而不是BS 3+的更新是我，还是专栏失去了响应能力？e、 例如，在Bootstrap 3上尝试

，下拉列上的样式丢失。添加样式

边距：0自动！重要的；位置：相对位置；显示：块

到

它将div居中，但破坏了菜单：（非常感谢！上述解决方案使其在动态设置中变得困难，您的解决方案非常完美且更加灵活。为您干杯，先生！这是最好的解决方案。代码小，效果非常好。在我添加另一个div时（尝试第一个答案）在de UL内部，我的所有文本都会改变颜色，使用此解决方案不会发生这种情况。非常感谢！很好，它工作得很好-当然。但它没有IE支持。仅在IE12中工作。当您动态创建下拉菜单（例如WordPress）时，这是一个特别有用的解决方案更改下拉菜单的标记是一件痛苦的事情。对于响应性强的设计来说很棒！！酷兄弟！很好！Thanx！；）YAMM工作得很好，很容易集成（我使用YAMM3和Bootstrap 3.3.7）。谢谢

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