Bootstrap 3 - показывает свернутую навигацию для всех размеров экрана

Я использую Bootstrap v3.

У меня есть классы navbar на месте, так что, когда у меня есть экран мобильного размера, навигация рушится, и появляется маленькая кнопка переключения между сеткой - так что это работает как ожидалось.

что бы я хотел, для этого является действием по умолчанию для всех размеров экрана. То есть даже на рабочем столе я хотел бы, чтобы навигация была свернута, и кнопка переключения была видимой.

Я просмотрел css и есть целая куча вещей, которые обеспечивают функциональность, хотя я не знаю, какие части меняться.

Я пробовал комментировать более крупные медиа-запросы, хотя их много, и, похоже, он имеет эффект детонации для другого стиля.

любые идеи?

Ответы

Ответ 1

Вы можете использовать переопределить CSS-настройки Bootstrap как это...

    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

Демо: http://www.bootply.com/114896

Это гарантирует, что свернутый navbar всегда используется путем переопределения запросов Bootstrap @media.

Обновление: Для Bootstrap 4 вам просто нужно удалить класс navbar-toggleable: http://www.codeply.com/go/LN6szcJO53

Ответ 2

Это то, что сработало для меня.

Посещение: http://getbootstrap.com/customize/

Найдите: "Меньшие переменные" → "Контрольные точки запросов к медиа"

Изменить: значение @screen-lg от 1200 пикселей до 1920 пикселей

Найдите: "Сетевая система" → @grid-float-breakpoint

Изменить: @screen-sm-min на @screen-lg

Прокрутите до конца страницы.

Нажмите "Компилировать и загрузить"

Извлеките и используйте эти загруженные файлы.

Ответ 3

Это сработало для меня:

.navbar-collapse.collapse {
    display: none!important;
}

Если вы обнаружите проблемы с переключением, добавьте следующее:

.navbar-collapse.collapse.in{
    display: block!important;
}

Ответ 4

Хотел сэкономить время, но это было не так. У меня возникли проблемы с последней загрузкой, есть лишний код и проблема с overflow в раскрывающемся меню. Этот код был лучшим решением для меня:

.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}

Ответ 5

Добавление значения 100% на @grid-float-breakpoint (сетка → @grid-float-breakpoint → 100% вместо @screen-sm-min).

Ответ 6

Самый простой способ найти файл переменной и изменить

// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;

к

// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     ( your break point );

Только если вы используете LESS ofc.