Bootstrap 3 - show collapsed navigation для всех размеров экрана

Question

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

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

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

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

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

любые идеи?

Answer 1

Вы можете использовать переопределить Bootstrap CSS по умолчанию на подобное ...

.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 всегда используется переопределение @media запросов Bootstrap.

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

Answer 2

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

визит: http://getbootstrap.com/customize/

Расположить: 'Меньше переменных' -> 'Медиа запросы точки останова'

Изменения: @ экран-Л.Г. значения от 1200px до 1920px

Locate: "подвесной системы" -> @ сетки поплавковой точки останова

Изменения: @ трафаретные см-мин до @ экрана-Л.Г.

Свитка до конца страницы.

Нажмите на «компилировать и загрузить»

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

Answer 3

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

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

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

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

Answer 4

Добавление 100% стоимости на @grid-float-breakpoint (подвесная система ->@grid-float-breakpoint - >100% вместо @screen-sm-min).

Answer 5

Самый простой способ, который я нашел, - изменить переменную.меньше файлов и изменение

// 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); 

Только если вы используете МЕНЬШЕ OFC.

Answer 6

Хотел сэкономить время, но это было не так. У меня возникли проблемы с последней загрузкой, есть лишний код и проблема с 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; 
}