Html Bootstrap 水平下拉
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18616040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap horizontal drop down
提问by elad.chen
Take a look at this picture:
看看这张照片：
I want the dropdown menu items to be stack from left to right (horizontally). I cannot seem get this to work, tried using "list-inline" class mentioned in the official documentation, that only makes things worse.
我希望下拉菜单项从左到右（水平）堆叠。我似乎无法让它工作，尝试使用官方文档中提到的“list-inline”类，这只会让事情变得更糟。
Here's the HTML:
这是 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>
I'm using Bootstrap 3
我正在使用 Bootstrap 3
回答by Praveen
Enclose those liinto a ullist and the class as list-inlinelike this
将它们包含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>
Check this screenshot
检查此屏幕截图
Here is the JSFiddle
这是JSFiddle
Updates1:
更新1：
As I mentioned in comments, class: dropdown-menuhas the min-width as 160px. Hence it is fixed to width. Try to override it.
正如我在评论中提到的，class: dropdown-menu有min-width as 160px. 因此它固定为宽度。尝试覆盖它。
Updates2:
更新2：
As I mentioned in comments, bootstrap has some default style which can be overridden like
正如我在评论中提到的，bootstrap 有一些默认样式，可以像
.dropdown-menu{
min-width: 200px;
}
Incase if you feel that it affects other elements then override using idselector.
如果您觉得它会影响其他元素，请使用id选择器进行覆盖。
#Numberlist.dropdown-menu{
min-width: 200px;
}
Find the difference in this JSFiddle
在这个JSFiddle 中找出不同之处
回答by migli
the dropdown-menu is restricted by the width of it's li container.
下拉菜单受其 li 容器的宽度限制。
just add :
只需添加：
.dropdown-menu {
margin-right:-1000px;
}
.dropdown-menu > li {
display: inline-block;
}
回答by dj.cowan
A full width - 100% menu width option should be possible
全宽 - 100% 菜单宽度选项应该是可能的
.navbar-nav {position: relative; }
.navbar-nav {position: relative; }
li.dropdown {position: static;}
li.dropdown {position: static;}
.dropdown-menu {width: 100%;}
.dropdown-menu {width: 100%;}
.dropdown-menu > li {display: inline-block;}
.dropdown-menu > li {display: inline-block;}
or thereabout… the basic idea is to make the dropdown position relative to the menu and not the li… as migli rightly points out
或者大约......基本思想是使下拉位置相对于菜单而不是li......正如migli正确指出的那样
"the dropdown-menu is restricted by the width of it's li container."
“下拉菜单受其 li 容器的宽度限制。”
回答by Arrueira Vermelha
A combination of
组合
<ul class="dropdown-menu">
<ul class='list-inline'>
<!-- etc. -->
with
和
.dropdown-menu {
margin-right:-1000px;
}
and some additional appearance styling worked for me. Thanks!
和一些额外的外观造型对我有用。谢谢！
回答by pedalGeoff
To add to @dj.cowan's solution, I removed the .navbar-nav position property utilizing instead the default .navbar position, which then made the dropdown 100% width of the page. I then added float:right to the li to lineup under navbar-right.
为了添加到@dj.cowan 的解决方案中，我删除了 .navbar-nav 位置属性，而是使用默认的 .navbar 位置，然后使下拉菜单的页面宽度为 100%。然后我将 float:right 添加到 li 到 navbar-right 下的阵容中。
li.dropdown {position: static; float:right}
li.dropdown {position: static; float:right}
.dropdown-menu {width: 100%;}
.dropdown-menu {width: 100%;}
.dropdown-menu > li {display: inline-block;}
.dropdown-menu > li {display: inline-block;}
