Question

看看这张照片：

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

检查此屏幕截图

enter image description here

以下是JSFiddle

更新1：

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

enter image description here

更新2：

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

一样被覆盖

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

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

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

在JSFiddle

中找出差异

Answer 2

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

只需添加：

.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正确地指出的那样

＆＃34;下拉菜单受其容器宽度的限制。＆＃34;

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：右边的li到linebar-right下的阵容。

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

.dropdown-menu {width: 100%;}

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

Bootstrap水平下拉

5 个答案: