Bootstrap horizontal drop down

Question

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 \"l

Answer 1

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.

li.dropdown {position: static; float:right}

.dropdown-menu {width: 100%;}

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

Answer 2

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

Answer 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

Answer 4

A full width - 100% menu width option should be possible

.navbar-nav {position: relative; }

li.dropdown {position: static;}

.dropdown-menu {width: 100%;}

.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

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

Answer 5

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!