twitter bootstrap - 多列下拉列表

Question

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

我不是要尝试嵌套下拉列表,我只是想改变下拉列表的显示方式,以便每列不超过10个项目,但是仍然应该显示所有项目.我尝试将每10 li秒放入他们自己的div中,但我认为这甚至不符合HTML.是否可以通过TBS完成此操作？

Answer 1

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

我已经通过添加类"列"来解决它,其中我设置了列数和下拉宽度.当然,您可以根据媒体查询设置列数和宽度.

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

我不得不添加最小宽度,否则第3列溢出右边距:

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

(如果你用愚蠢的声音说' Mega Menu '会有帮助)

一旦像样的产品是YAMM或YAMM3(取决于哪个版本的引导你使用).