Как сделать навбар фиксированным

Обновлено: 04.07.2024

Я использую bootstrap на моем сайте и у меня возникли проблемы с navbar fixed top. Когда я просто использую обычную навигационную панель, все в порядке. Однако, когда я пытаюсь переключить его на navbar fixed top, все остальное содержимое на сайте сдвигается вверх, как будто navbar нет, и navbar перекрывает его. вот в основном, как я выложил его:

Я попытался точно скопировать примеры загрузок, но все еще имел эту проблему только при использовании navbar fixed top. что я делаю неправильно?

требуется обивка кузова

фиксированная навигационная панель будет накладываться на ваш другой контент, если вы не добавите padding наверх . Попробуйте свои собственные значения или используйте наш фрагмент ниже. Совет: по умолчанию навигационная панель имеет высоту 50px.

обязательно включите этот после ядро Bootstrap CSS.

и Bootstrap 4 доктора.

фиксированные навигационные панели используют положение: фиксированное, что означает, что они вытащены из нормальный поток DOM и может потребовать пользовательского CSS (например, padding-top На) для предотвращения перекрытия с другими элементами.

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

это решило эти проблемы для меня

это делает заполнение 40px по умолчанию и 0px, когда под шириной 768px (что согласно документам bootstrap является обрезкой макета сотового телефона где разрыв будет создан)

гораздо более удобное решение для вашей справки, оно отлично работает во всех моих проектах:

изменить первую строку с

до

эта проблема известна, и на сайте начальной загрузки twitter есть обходной путь:

когда вы прикрепляете навигационную панель, не забудьте учитывать скрытую область нижний. Добавить 40 пикселей или больше для заполнения с . Будьте уверены, чтобы добавить после этого ядро начальной загрузки CSS и прежде дополнительный реагировать стиль CSS.

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

@ Ryan, вы правы, жесткое кодирование высоты заставит его работать плохо в случае пользовательских навигационных панелей. Это код, который я использую для BS 3.0.0 счастливо:

Я поставил это перед контейнером выхода:

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

редактировать-это работает намного лучше:

проблема заключается в navbar-fixed-top, который будет накладывать содержимое, если не указать Body-padding. Никакое решение, представленное здесь, не работает в 100% случаях. Решение JQuery мигает/сдвигает страницу после загрузки страницы, что выглядит странно.

реальное решение для меня заключается не в использовании navbar-fixed-top, а navbar-static-top.

все предыдущие решения жесткий код 40 пикселей специально в html или CSS в той или иной форме. Что делать, если навигационная панель содержит другой размер шрифта или изображение? Что делать, если у меня есть веская причина не связываться с тело padding в первую очередь? Я искал решение этой проблемы, и вот что я придумал:

вы можете перемещать его вверх или вниз, регулируя '1'. Это, кажется, работает для меня, независимо от размера содержимое в навигационной панели, до и после изменения размера.

мне любопытно, что другие думают об этом: пожалуйста, поделитесь своими мыслями. (Это будет рефакторинг, чтобы не повторять, кстати.) Помимо использования jQuery, есть ли другие причины не подходить к проблеме таким образом? Я даже получил его работу со вторичной navbar, как это:

PS: выше находится на Bootstrap 2.3.2-будет ли он работать в 3.x до тех пор, пока имена универсальных классов остаются. на самом деле, это должно работать независимо от бутстрэпа, верно?

EDIT: вот полная функция jquery, которая обрабатывает две сложенные, отзывчивые фиксированные навигационные панели динамического размера. Он требует 3 html-классов (или может использовать идентификаторы): user-top, admin-top и contentwrap:

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

интервал отлично работает на всех размерах экрана.

для обработки строк обертывания в строке меню примените идентификатор к навигационной панели, например:

и добавьте этот небольшой скрипт в голову после включения jquery, например:

таким образом, верхняя прокладка тела автоматически настраивается.

решение для Bootstrap 4, оно отлично работает во всех моих проектах:

изменить первую строку с

до

ссылка на документацию Bootstrap

о времени, когда они сделали это правильно: D

все, что вам нужно сделать, это

далее к ответу Ника Бисби, если вы получаете эту проблему, используя HAML в rails, и вы применили исправление Роберто Барроса здесь:

Я заменил на "bootstrap_and_overrides.css " to:

=требуется twitter-bootstrap-static / bootstrap.стиль CSS.Эрб

. вам нужно поставить тело CSS до требуются заявление выглядит следующим образом:

если оператор require находится перед CSS тела, он не вступит в силу.

Я бы сделал так:

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

Я просто завернул навигатор в

нет фантазии фокус-покус, но он работал..

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

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

Содержание

Как это работает

Вот что вам необходимо знать перед началом работы с навигационной панелью:

Навигационная панель требует обертывания .navbar с .navbar-toggleable-* for responsive collapsing и классов цветовой схемы.
Навигационные панели и их контент по умолчанию подвижные. Используйте дополнительные контейнеры, чтобы ограничить их горизонтальную ширину.
Навигационные панели и их содержимое построены с помощью flexbox, что обеспечивает легкость выравнивания через классы утилиты.
Навигационные панели по умолчанию адаптивны, но вы можете легко модифицировать их, чтобы изменить это. Адаптивное поведение зависит от нашего плагина Collapse JavaScript.
Обеспечьте доступность с помощью элемента

Brand

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

Добавление изображений в .navbar-brand вероятно, всегда требует пользовательские стили или утилиты для правильного размера. Ниже представлены несколько примеров для демонстрации.

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

Активные состояния - с .active - для указания текущей страницы могут быть применены напрямую к .nav-link или их непосредственным родительским .nav-item .

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

Вы также можете использовать выпадающие списки в вашей навигации навигационной панели. Для раскрывающихся меню требуется обернуть элемент для позиционирования, поэтому обязательно используйте отдельные и вложенные элементы для .nav-item и .nav-link , как показано ниже.

Формы

Разместите различные элементы управления формы и компоненты в навигационную панель с помощью .form-inline .

При необходимости совместите содержимое своих встроенных форм с утилитами.

Группы входных данных также работают:

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

Текст

Навигационная панель может содержать биты текста с помощью .navbar-text . Этот класс регулирует вертикальное выравнивание и горизонтальное расстояние для строк текста.

При необходимости совместите их с другими компонентами и утилитами.

Цветовые схемы

Theming для навигационной панели никогда не была проще, благодаря сочетанию тематических классов и утилит background-color . Выберайте из .navbar-light для использования со светлыми цветами фона, или .navbar-inverse для темных цветов фона. Затем, настройте с помощью .bg-* утилиты.

Контейнеры

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

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

Размещение

Используйте наши утилиты для размещения навигационных панелей в нестатических позициях. Выберите один из следующих вариантов: фиксированная сверху, фиксированная снизу или прикрепленная к верхней части. Обратите внимание, что position: sticky , используемый для .sticky-top , поддерживается не в каждом браузере.

Режим отображения меню зависит от ширины viewport браузера. Точка перелома задается с помощью css-класса navbar-expand- .

Для установки цветового оформления меню используются еще два дополнительных класса: navbar- и bg- . Для установки цвета фона к bg- необходимо добавить любую из восьми цветовых схем — primary , secondary , dark , light , warning , danger , info , success . Класс navbar- отвечает за цвет текста и поддерживает два варианта — navbar-dark и navbar-light .

Если же нужно ограничить ширину только содержимого, а само меню отображать на всю ширину страницы, то .container следует поместить внутри .navbar .

Для позиционирования меню фреймворк предлагает три дополнительных класса:

fixed-top — фиксирует меню в самом верху страницы;
fixed-bottom — фиксирует меню в самом низу страницы;
sticky-top — приклеивает меню в верху при прокрутке страницы.

Элементы меню

Название или логотип компании

Кнопка для открытия меню

Имеет css-класс .navbar-toggler и предназначена для показа и скрытия содержимого меню .collapse.navbar-collapse на малениких экранах:

Блок содержимого меню

Имеет css-классы .collapse.navbar-collapse и скрывается в контрольной точке, которая задается классом navbar-expand- . Может быть показано и скрыто по клику на кнопке .navbar-toggler :

Блок ссылок меню

Имеет css-класс .navbar-nav и состоит из ссылок и вложенных выпадающих списков со ссылками:

Форма внутри меню

Текст внутри меню

Класс .navbar-text — позволяет добавлять текст в меню.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Здравствуйте! В этой статье я расскажу, как использовать компонент NavBar Bootstrap4 для создания меню. Дело в том, что в бутстрап4 он немного отличается от 3-го бутстрапа.

Вот эти нюансы мы и рассмотрим в этом материале.

Как с помощью Navbar создать основное вертикальное меню для сайта

Для создания основного вертикального меню необходимо:

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

HTML и CSS код вертикального меню для сайте на базе Navbar:

Например, для того чтобы кнопку поместить по центру, оставшегося после бренда пространства в меню, к ней необходимо добавить классы ml-auto и mr-auto:

Как выровнять пункты в мобильном виде меню

Выравнивание пунктов в мобильном представлении меню выполняется посредством добавления класса text-right или text-center к элементу с классом navbar-nav:

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте также: