Bootstrap水平下拉

时间:2013-09-04 14:04:44

标签: html css twitter-bootstrap

看看这张照片:

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

5 个答案:

答案 0 :(得分:14)

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

中找出差异

答案 1 :(得分:3)

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

只需添加:

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

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

答案 2 :(得分:3)

应该可以使用全宽 - 100%菜单宽度选项

.navbar-nav {position: relative; }

li.dropdown {position: static;}

.dropdown-menu {width: 100%;}

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

或者说......基本的想法是相对于菜单而不是li ......来制作下拉位置......正如migli正确地指出的那样

  

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

答案 3 :(得分:1)

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

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

和一些额外的外观造型为我工作。 谢谢!

答案 4 :(得分:0)

要添加到@ 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;}