Twitter bootstrap - выпадение нескольких столбцов
Я пытаюсь создать раскрывающийся список бутстрапа twitter, который находится где-то между 7-36 пунктами меню. К сожалению с этим множеством предметов, я могу видеть только первые 15 или около того. Я хотел бы иметь возможность разделить количество элементов таким образом, чтобы их не было больше 10 на столбец, до создания нового столбца.
Я не пытаюсь делать вложенные выпадающие списки, я просто пытаюсь изменить представление выпадающего списка, чтобы в столбце было не более 10 элементов, однако все элементы должны отображаться. Я попытался помещать каждые 10 li в свой собственный div, но я думаю, что даже не совместимый с HTML. Можно ли это сделать через TBS?
Ответы
Ответ 1
Вы можете использовать Bootstrap .row-fluid, чтобы выполнить то, что вам нужно.
Я ввел CSS для ширины выпадающего меню, но вы можете указать класс /id и включить его в таблицу стилей.
В основном, что происходит здесь:
- Мы создаем флюидную сетку внутри выпадающего меню
- Установка фиксированной ширины для самого раскрывающегося контейнера
- Теги
li наследуют свой стиль из раскрывающегося списка parent
Пример ниже был протестирован только в Chrome v23
* Boostrap 2.x:
<ul id="multicol-menu" class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="row-fluid" style="width: 400px;">
<ul class="unstyled span4">
<li><a href="#">test1-1</a></li>
<li><a href="#">test1-2</a></li>
<li><a href="#">test1-3</a></li>
</ul>
<ul class="unstyled span4">
<li><a href="#">test2-1</a></li>
<li><a href="#">test2-2</a></li>
<li><a href="#">test2-3</a></li>
</ul>
<ul class="unstyled span4">
<li><a href="#">test3-1</a></li>
<li><a href="#">test3-2</a></li>
<li><a href="#">test3-3</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
[EDIT]
* Boostrap 3.x:
<ul id="multicol-menu" class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="row" style="width: 400px;">
<ul class="list-unstyled col-md-4">
<li><a href="#">test1-1</a></li>
<li><a href="#">test1-2</a></li>
<li><a href="#">test1-3</a></li>
</ul>
<ul class="list-unstyled col-md-4">
<li><a href="#">test2-1</a></li>
<li><a href="#">test2-2</a></li>
<li><a href="#">test2-3</a></li>
</ul>
<ul class="list-unstyled col-md-4">
<li><a href="#">test3-1</a></li>
<li><a href="#">test3-2</a></li>
<li><a href="#">test3-3</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
Ответ 2
Я решил это, добавив класс "столбцы", где я установил количество столбцов и уменьшил ширину.
Конечно, вы можете установить количество столбцов и ширину в зависимости от запросов к мультимедиа.
https://jsfiddle.net/maciej_p/eatv1b4b/18/
HTML:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">wybierz region<b class="caret"></b></a>
<ul class="dropdown-menu columns">
<li><a href="#"><strong>Górny Śląsk</strong></a></li>
<li><a href="#">powiat będziński</a></li>
<li><a href="#">powiat bielski</a></li>
<li><a href="#">powiat bieruńsko-lędziński</a></li>
<li><a href="#">powiat cieszyński</a></li>
<li><a href="#">powiat częstochowski</a></li>
<li><a href="#">powiat gliwicki</a></li>
<li><a href="#">powiat kłobucki</a></li>
<li><a href="#">powiat lubliniecki</a></li>
<li><a href="#">powiat mikołowski</a></li>
<li><a href="#">powiat myszkowski</a></li>
</ul>
</li>
CSS
@media screen and (max-width: 991px){
.columns{
height: 200px;
overflow-y:scroll;
}
}
@media screen and (min-width: 992px){
.columns{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
width: 500px;
height:170px;
}
}
Ответ 3
Я скорректировал код в соответствии с Bootstrap 3. Для выпадающего списка из трех столбцов:
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1 </a>
<div class="dropdown-menu multi-column">
<div class="row">
<div class="col-md-4">
<ul class="dropdown-menu">
<li><a href="#">Col 1 - Opt 1</a></li>
<li><a href="#">Col 1 - Opt 2</a></li>
</ul>
</div>
<div class="col-md-4">
<ul class="dropdown-menu">
<li><a href="#">Col 2 - Opt 1</a></li>
<li><a href="#">Col 2 - Opt 2</a></li>
</ul>
</div>
<div class="col-md-4">
<ul class="dropdown-menu">
<li><a href="#">Col 2 - Opt 1</a></li>
<li><a href="#">Col 2 - Opt 2</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
Мне пришлось добавить минимальную ширину, иначе 3-й столбец переполнил правое поле:
.dropdown-menu.multi-column {
width: 400px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width:100px;
}
Ответ 4
Также посмотрите предложения Mega Menu.
(это помогает, если вы говорите " Mega Menu" глупым голосом)
Когда достойное предложение YAMM или YAMM3 (в зависимости от того, какую версию Bootstrap вы используете).
Ответ 5
У меня есть недавняя публикация, показывающая, как добиться этого для 2 столбцов, которые должны быть легко изменены в соответствии с вашими потребностями, изменив ширину раскрывающегося списка нескольких столбцов и изменив количество интервалов в строке текучей среды.
Проверьте это: http://www.devlifeline.com/2013/09/multi-column-bootstrap-dropdown.html
FYI - Сохраняет стили в соответствии с другими раскрывающимися меню бутстрапа
Ответ 6
Посмотрите этот плагин, это будет полезно для вас.
http://alijafarian.com/bootstrap-multi-column-dropdown-menu/
