html - 引导水平下拉

Question

看看这张照片：

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

更新1：

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

更新2：

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

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

Answer 3

全宽 - 100% 菜单宽度选项应该是可能的

.navbar-nav {position: relative; }

li.dropdown {position: static;}

.dropdown-menu {width: 100%;}

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

或者差不多……基本的想法是使下拉位置相对于菜单而不是li……正如migli正确指出的那样

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

Answer 4

的组合

<ul class="dropdown-menu">
                <ul class='list-inline'>
<!-- etc. -->

和

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

一些额外的外观样式对我有用。谢谢！

Answer 5

为了添加到@dj.cowan 的解决方案，我删除了 .navbar-nav 位置属性，而是使用默认的 .navbar 位置，然后将下拉菜单设置为页面的 100% 宽度。然后我将 float:right 添加到 li 以在 navbar-right 下排列。

li.dropdown {position: static; float:right}

.dropdown-menu {width: 100%;}

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