Подтвердить что ты не робот

Twitter bootstrap - выпадение нескольких столбцов

Я пытаюсь создать раскрывающийся список бутстрапа twitter, который находится где-то между 7-36 пунктами меню. К сожалению с этим множеством предметов, я могу видеть только первые 15 или около того. Я хотел бы иметь возможность разделить количество элементов таким образом, чтобы их не было больше 10 на столбец, до создания нового столбца.

Я не пытаюсь делать вложенные выпадающие списки, я просто пытаюсь изменить представление выпадающего списка, чтобы в столбце было не более 10 элементов, однако все элементы должны отображаться. Я попытался помещать каждые 10 li в свой собственный div, но я думаю, что даже не совместимый с HTML. Можно ли это сделать через TBS?

4b9b3361

ОТВЕТЫ

Ответ 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 - Сохраняет стили в соответствии с другими раскрывающимися меню бутстрапа