看看这张照片:
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
答案 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>
检查此屏幕截图
以下是JSFiddle
更新1:
正如我在评论中提到的那样,class: dropdown-menu
包含 min-width as 160px
。因此它固定为宽度。尝试覆盖它。
更新2:
正如我在评论中提到的,bootstrap有一些默认样式,可以像
一样被覆盖.dropdown-menu{
min-width: 200px;
}
如果您认为它影响其他元素,请使用id
选择器覆盖。
#Numberlist.dropdown-menu{
min-width: 200px;
}
中找出差异
答案 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;}