Twitter bootstrap 3 как активировать навигационный крах на небольших устройствах

Ответ 1

По умолчанию точка останова @screen-sm-min (т.е. ≥768px).

Просмотреть пример

Настроить контрольную точку навигатора

Чтобы настроить точку останова навигатора, измените менее переменную @grid-float-breakpoint.

Из документации:

Переполнение содержимого

Так как Bootstrap не знает, сколько места занимает контент в вашем навигаторе, вы можете столкнуться с проблемами с переносом содержимого во вторую строку. Чтобы решить эту проблему, вы можете:

...

c. Измените точку, с которой ваш навигатор переключается между спящим и горизонтальным режимами. Настройте переменную @grid-float-breakpoint или добавьте собственный медиа-запрос.

Вы можете использовать инструмент настройки Bootstrap для создания модифицированной версии Bootstrap. Из здесь вы можете изменить @grid-float-breakpoint на другую точку останова, определенную Bootstrap (т.е. xs, sm, md, lg)) или (т.е. 500px).

Когда вы закончите, перейдите в раздел Download и нажмите Compile and Download.

Edit

Ваша разметка работает так же, как и ожидалось: http://jsbin.com/kuxah/1/edit?html,output

Ответ 2

вот решение для нахальных людей

@media(max-width:$screen-sm-max) {
 .navbar-header {
    float: none;
}
.navbar-left,.navbar-right {
    float: none !important;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin-top: 7.5px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.collapse.in{
    display:block !important;
}

Ответ 3

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

.navbar-toggle{  
    @media(max-width:$screen-sm-max) {
    display: block !important;
  }
}