Bootstrap水平下拉

看看这张照片：

我希望下拉菜单项从左到右（水平）堆叠。 我似乎无法让它工作，尝试使用中提到的“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

附上那些li into a 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 http://jsfiddle.net/BjtNY/289/

更新1：

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

更新2：

正如我在评论中提到的，引导程序有一些默认样式可以被覆盖，例如

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

如果您觉得它影响其他元素，则使用覆盖id选择器。

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

找出其中的差异JSFiddle http://jsfiddle.net/BjtNY/291/