Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap horizontal drop down

Take a look at this picture:

example

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

like image 570
elad.chen Avatar asked Sep 04 '13 14:09

elad.chen


People also ask

How do I create a horizontal dropdown menu?

Description. Set the dropdown by including the attribute data-dropdown-menu and class dropdown to the menu container. Inside the <li> tag of <ul> you can create one more new tag <ul> to create many levels of dropdown.

How set dropdown position in Bootstrap?

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add . dropdown-menu-right to a . dropdown-menu to right align the dropdown menu.

How do you position a drop down?

Example Explained HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.


2 Answers

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

enter image description here

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.

enter image description here

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

like image 146
Praveen Avatar answered Oct 01 '22 00:10

Praveen


the dropdown-menu is restricted by the width of it's li container.

just add :

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

.dropdown-menu > li {
    display: inline-block;
}
like image 25
migli Avatar answered Oct 01 '22 00:10

migli