Я использую bootstrap на моем сайте, и у меня проблемы с фиксированной вершиной navbar. Когда я просто использую обычный навигатор, все в порядке. Однако, когда я пытаюсь переключить его на navbar fixed top, все остальное содержимое сайта сдвигается вверх, как навигация, там нет, а navbar перекрывает его. вот в основном, как я это сформулировал:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
Я попытался точно копировать примеры бутстрапов, но все еще имею эту проблему только при использовании фиксированной вершины navbar. что я делаю неправильно?
Ваш ответ прямо в документах:
Обивка тела требуется
Фиксированная панель навигации будет перекрывать ваш другой контент, если вы не добавите
padding
в верхнюю часть<body>
. Попробуйте свои собственные значения или используйте наш фрагмент ниже. Совет: по умолчанию навигационная панель имеет высоту 50 пикселей.body { padding-top: 70px; }
Обязательно включите это после основного Bootstrap CSS.
и в Bootstrap 4 документа...
Фиксированные навигационные панели используют положение: фиксированное, что означает, что они извлекаются из обычного потока DOM и могут потребовать пользовательский CSS (например, padding-top на), чтобы предотвратить наложение на другие элементы.
Как утверждают другие, добавление дополнения к телу отлично работает. Но когда вы делаете экран более узким (до ширины сотового телефона), между навигационной панелью и корпусом есть зазор. Кроме того, переполненный навигатор может переноситься в многострочный бар, снова перезаписывая часть содержимого.
Это решило эти проблемы для меня
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
Это делает по умолчанию 40px и 0px при ширине 768px (что в соответствии с документами bootstrap является отключением раскладки сотового телефона, где будет создан промежуток)
гораздо более удобное решение для вашей справки, оно отлично работает во всех моих проектах:
измените свою первую строку с
.navbar.navbar-fixed-top
к
.navbar.navbar-default.navbar-static-top
Эта проблема известна и существует обходной путь на сайте начальной загрузки twitter:
Когда вы прикрепляете навигационную панель, не забывайте учитывать скрытую область под. Добавьте 40px или более отступов к
<body>
. Обязательно добавьте это после основного Bootstrap CSS и перед дополнительным отзывчивым CSS.
Это сработало для меня:
body { padding-top: 40px; }
@Ryan, вы правы, жесткое кодирование высоты сделает работу плохой в случае пользовательских navbars. Это код, который я использую для BS 3.0.0 с радостью:
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
parseInt
для css-значений высоты, я просто использовал $('#main-navbar').height()
, но в остальном это было очень полезно и решило мою проблему, спасибо.
Я помещаю это перед контейнером урожая:
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
Мне нравится этот подход, потому что он документирует хак, необходимый для его работы, плюс он также работает для мобильного nav.
EDIT - это работает намного лучше:
@media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
Проблема заключается в navbar-fixed-top, который будет перекрывать ваш контент, если не будет указано заполнение тела. Никакое решение, представленное здесь, не работает в 100% случаях. Решение JQuery мигает/сдвигает страницу после загрузки страницы, что выглядит странно.
Реальное решение для меня - не использовать navbar-fixed-top, а navbar-static-top.
.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron
<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
Как я уже писал в аналогичном вопросе, у меня был хороший успех с созданием фиктивного нефиксированного навигационного бара прямо перед моей реальной фиксированной навигационной панелью.
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
Интервал работает отлично при всех размерах экрана.
Все предыдущие решения с жестким кодом 40 пикселей специально в html или CSS так или иначе. Что делать, если navbar содержит другой размер шрифта или изображение? Что делать, если у меня есть веская причина не вмешиваться в отладку body в первую очередь? Я искал решение этой проблемы, и вот что я придумал:
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
Вы можете перемещать его вверх или вниз, настраивая "1". Кажется, это работает для меня независимо от размера содержимого на панели навигации до и после изменения размера.
Мне любопытно, что другие думают об этом: поделитесь своими мыслями. (Он будет реорганизован, чтобы не повторять, кстати.) Помимо использования jQuery, есть ли другие причины не подходить к проблеме таким образом? Я даже работал с дополнительным навигатором следующим образом:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: выше на Bootstrap 2.3.2 - будет ли он работать в 3.x Пока имена родовых классов остаются... на самом деле, он должен работать независимо от начальной загрузки, правильно?
EDIT: вот полная функция jquery, которая управляет двумя сложными фиксированными навигаторами с динамическим размером. Он требует 3 html-классов (или может использовать id): user-top, admin-top и contentwrap:
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});
Для обработки строк обтекания в строке меню примените идентификатор к навигационной панели, например:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">
и добавьте этот маленький script в голову после включения jquery, например:
<script>
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
});
});
</script>
Таким образом, верхнее заполнение тела автоматически настраивается.
Решение для Bootstrap 4, оно отлично работает во всех моих проектах:
измените свою первую строку с
navbar-fixed-top
в
sticky-top
Ссылка на документацию по начальной загрузке
О времени они сделали это правильно: D
для Bootstrap 3. +, я бы использовал следующий CSS, чтобы исправить navbar-fixed-top и проблему с перекрытием на привязке, основанную на https://github.com/twbs/bootstrap/issues/1768
/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 40px; }
}
/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
Все, что вам нужно сделать, это
@media (min-width: 980px) { body { padding-top: 40px; } }
Я бы сделал это:
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }
Это должно сделать так, чтобы блок навигации не растягивался вниз и не закрывал содержимое страницы.
В ответ на ответ Ник Бисби, если вы используете эту проблему, используя HAML в рельсах, и вы применили исправление Роберто Барроса:
Я заменил require в "bootstrap_and_overrides.css" на:
= требуется twitter-bootstrap-static/bootstrap.css.erb
(см. https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)
... вам нужно поместить тело CSS перед оператором require следующим образом:
@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb
Если инструкция require находится перед тегом CSS, она не вступает в силу.
использование
class= "navbar navbar-expand-lg navbar-light bg-light sticky-top "
Для начальной загрузки 4
Я только что завернул навигатор в
<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>
Никакой причудливый фокус, но он сработал.
nav-? ??
представлять?