引导水平下拉 [英] Bootstrap horizontal drop down

问题描述

请看这张图片：

我希望下拉菜单项从左到右（水平）堆叠。
我似乎无法工作，尝试使用list-inline类在
官方文档中提到，只是使事情变得更糟。

以下是HTML：

 < nav class = navbar-default navbar-static-toprole =navigation> 
< ul class =nav navbar-nav> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>列表项< / 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

解决方案

将 li 附加到 ul 列表，并将类作为 列表中的 。

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

检查此屏幕截图

>

是

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.

Here's the 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

解决方案

Enclose those li into a ul list and the class as list-inline like this

<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

Updates1:

As I mentioned in comments, class: dropdown-menu has the min-width as 160px. Hence it is fixed to width. Try to override it.

Updates2:

As I mentioned in comments, bootstrap has some default style which can be overridden like

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

Incase if you feel that it affects other elements then override using id selector.

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

Find the difference in this JSFiddle

这篇关于引导水平下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！