Горизонтальное раскрытие бутстрапа

Посмотрите на эту картинку:

example

Я хочу, чтобы элементы выпадающего меню располагались слева направо (по горизонтали). Я не могу заставить это работать, попробовал использовать класс "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

Ответы

Ответ 1

Вставьте те 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>

Отметьте этот снимок экрана

enter image description here

Вот JSFiddle

Обновления1:

Как я уже упоминал в комментариях, class: dropdown-menu имеет min-width as 160px. Следовательно, он фиксируется по ширине. Попытайтесь переопределить его.

enter image description here

Обновления2:

Как я уже упоминал в комментариях, bootstrap имеет некоторый стиль по умолчанию, который можно переопределить, например

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

Если вы чувствуете, что он влияет на другие элементы, то переопределите с помощью селектора id.

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

Найдите разницу в этом JSFiddle

Ответ 2

выпадающее меню ограничено шириной контейнера li.

просто добавьте:

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

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

Ответ 3

Должна быть доступна полная ширина - 100% ширина меню.

.navbar-nav {position: relative; }

li.dropdown {position: static;}

.dropdown-menu {width: 100%;}

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

или около того... основная идея состоит в том, чтобы сделать выпадающее положение относительно меню, а не li... поскольку мигли правильно указывает

"выпадающее меню ограничено шириной контейнера li.

Ответ 4

Комбинация

<ul class="dropdown-menu">
                <ul class='list-inline'>
<!-- etc. -->

с

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

и для меня работали некоторые дополнительные стили оформления. Спасибо!

Ответ 5

Чтобы добавить к решению @dj.cowan, я удалил свойство position.navbar-nav, используя вместо этого значение по умолчанию .navbar, которое затем выпадало на 100% ширину страницы. Затем я добавил float: прямо к li в линейку под navbar-right.

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

.dropdown-menu {width: 100%;}

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