Большая разница между Bootstrap 2 и Bootstrap 3 заключается в том, что Bootstrap 3 «сначала мобильный».
Это означает, что стили по умолчанию разработаны для мобильных устройств, а в случае панелей навигации это означает, что они «свернуты» по умолчанию и «расширяются», когда достигают определенного минимального размера.
На сайте Bootstrap 3 есть «подсказка» о том, что делать: http://getbootstrap.com/components/#navbar
Настроить точку схлопывания
В зависимости от содержимого на панели навигации вам может потребоваться изменить точку, в которой панель навигации переключается между свернутым и горизонтальным режимами. Настройте переменную @ grid-float-breakpoint или добавьте свой собственный медиа-запрос.
Если вы собираетесь перекомпилировать LESS, вы найдете отмеченную переменную LESS в файле variables.less
. В настоящее время он установлен на «раскрытие» @media (min-width: 768px)
, что в терминах Bootstrap 3 является «маленьким экраном» (т. Е. Планшетом).
@grid-float-breakpoint: @screen-tablet;
Если вы хотите, чтобы свернутое изображение оставалось немного дольше, вы можете настроить его следующим образом:
@grid-float-breakpoint: @screen-desktop;
(точка останова 992px)
или расшириться раньше
@grid-float-breakpoint: @screen-phone
(точка останова 480 пикселей)
Если вы хотите, чтобы он расширялся позже, а не перекомпилировал LESS, вам придется перезаписать стили, которые применяются в медиа-запросе 768px
, и вернуть их к предыдущему значению. Затем повторно добавьте их в подходящее время.
Я не уверен, есть ли лучший способ сделать это. Перекомпилировать Bootstrap МЕНЬШЕ в соответствии с вашими потребностями - лучший (самый простой) способ. В противном случае вам придется найти все медиа-запросы CSS, которые влияют на вашу панель навигации, перезаписать их стилями по умолчанию @ шириной 768 пикселей, а затем вернуть их обратно на более высокую минимальную ширину.
Перекомпиляция LESS сделает за вас все волшебство, просто изменив переменную. В этом суть прекомпиляторов LESS / SASS. знак равно
(обратите внимание, я просмотрел их все, это примерно 100 строк кода, что меня достаточно раздражает, чтобы отказаться от этой идеи и просто перекомпилировать Bootstrap для данного проекта, чтобы не испортить что-то случайно) em>
Надеюсь, это поможет!
Ваше здоровье!
person
jmbertucci
schedule
20.08.2013
<nav data-sm-collapse="800px"...
поскольку я понятия не имею, какая ширина мне нужна, пока не построю. - person rybo111   schedule 15.09.2015