Bootstrap水平下拉

Question

看看这张图:

例如http://i42.tinypic.com/wvbf3a.png

我希望下拉菜单项从左到右(水平)堆叠.我似乎无法让这个工作,尝试使用官方文档中提到的"list-inline"类,只会让事情变得更糟.

这是HTML:

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">List Item</a>
            <ul class="dropdown-menu">
                <li><a href="#" id="">1</a></li>
                <li><a href="#" id="">2</a></li>
                <li><a href="#" id="">1</a></li>
                <li><a href="#" id="">2</a></li>
                <li><a href="#" id="">3</a></li>
                <li><a href="#" id="">4</a></li>
                <li><a href="#" id="">5</a></li>
                <li><a href="#" id="">6</a></li>
            </ul>
        </li>
    </ul>
</nav>  

我正在使用Bootstrap 3

Answer 1

将它们li包含在ul列表和类中,list-inline就像这样

<ul class="dropdown-menu">
                <ul class='list-inline'>
                    <li><a href="#" id="">1</a>
                    </li>
                    <li><a href="#" id="">2</a>
                    </li>
                    <li><a href="#" id="">3</a>
                    </li>
                    <li><a href="#" id="">4</a>
                    </li>
                    <li><a href="#" id="">5</a>
                    </li>
                </ul>
</ul>

检查此屏幕截图

这是JSFiddle

Updates1:

正如我在评论中提到的,class: dropdown-menu有min-width as 160px.因此它固定为宽度.尝试覆盖它.

Updates2:

正如我在评论中提到的,bootstrap有一些默认样式可以覆盖,如

.dropdown-menu{
min-width: 200px;
}

如果您认为它影响其他元素,请使用id选择器覆盖.

#Numberlist.dropdown-menu{
min-width: 200px;
}

找出这个JSFiddle的不同之处

Answer 2

下拉菜单受其 li 容器的宽度限制。

只需添加：

.dropdown-menu {
    margin-right:-1000px;
}

.dropdown-menu > li {
    display: inline-block;
}