html - Bootstrap水平下拉

Question

看看这张照片:

我希望下拉菜单项从左到右(水平)堆叠。 我似乎无法让它工作，尝试使用 官方文档，这只会让事情变得更糟。

这是 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-内联像这样

<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

更新1:

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

更新2:

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

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

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

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

找出这个 JSFiddle 的不同之处