Как отключить сворачивание по навигационной шкале в начальной загрузке для небольших устройств

Я использую начальную загрузку, чтобы оправдать кучу вкладок, чтобы они равномерно соответствовали ширине родительского элемента. Это важно для меня. Однако Bootstrap автоматически сворачивает их для небольших устройств, давая им 100% ширину, чего я не хочу. Как я могу отключить эту функцию? Простой код:

<ul class="nav nav-tabs nav-justified>
    <li></li>
    <li></li>
    <li></li>
</ul>

collapse tabs twitter-bootstrap nav justify
person robinyapockets    schedule 08.12.2013    source источник
comment
У вас есть скриншот?   -  person James A Mohler    schedule 08.12.2013
comment
@JamesMohler Я новичок в stackoverflow и еще не имею права загружать фотографии, однако скриншот может не понадобиться. getbootstrap.com/components/#nav-tabs вы прочтете, что навигационные ссылки сложены для небольших устройств.   -  person robinyapockets    schedule 08.12.2013

Ответы (3)


arrow_upward
2
arrow_downward

Вы можете добавить контейнер с классом col-xs-12, тогда он будет размещаться на очень маленьких дисплеях. В конце концов, если вы хотите, чтобы он не складывался на всех дисплеях, просто напишите медиа-запрос.

Поищите медиазапросы там: http://getbootstrap.com/css/#grid

Если вы поделитесь дополнительным кодом, я могу дать более конкретный ответ.

person Gokhan Demirhan    schedule 08.12.2013
comment
Спасибо, я смог получить это с помощью media query.nav-justified › li {display: table-cell;} @Gokhan - person robinyapockets; 09.12.2013
comment
пожалуйста. Пожалуйста, примите мой ответ, чтобы любой, кто ищет решение подобной проблемы, мог это увидеть. - person Gokhan Demirhan; 09.12.2013
comment
Это не исправить; это на самом деле не меняет поведение вообще. - person felwithe; 26.03.2015

arrow_upward
1
arrow_downward

Вы должны добавить ширину: 1%, чтобы он растянулся.

.nav-justified > li {
    display: table-cell; 
    width: 1%
}
person Tony Cho    schedule 13.11.2014

arrow_upward
0
arrow_downward

Эти ответы неверны. В Bootstrap есть встроенный простой способ сделать это, точно так же, как он обрабатывает свертывание верхнего меню.

  1. Добавьте класс navbar-default к элементу nav. Без этого класса он рухнет, но у вас не будет маленького значка расширения (три горизонтальные линии, которые вы щелкаете, чтобы развернуть).

  2. Добавьте классы navbar-collapse collapse во внутренний div, содержащий ссылки, которые должны свернуть.

  3. Добавьте <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> перед вашим div, который должен свернуть.

Это выйдет довольно грязно, пытаясь вырезать и вставить мои 3 шага выше; что я сделал, так это буквально скопировал и вставил эти разделы из моей рабочей панели навигации вверху, а затем вставил их один за другим. Эти 3 элемента — то, что вам нужно: navbar-default, navbar-collapse и кнопка.

person felwithe    schedule 26.03.2015