twitter bootstrap navbar фиксированный верхний перекрывающийся сайт

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

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

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

16 ответов


ваш ответ прямо в docs:

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

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

body { padding-top: 70px; }

обязательно включите этот после основной загрузочный 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

to

.navbar.navbar-default.navbar-static-top

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

когда вы прикрепляете navbar, не забудьте учитывать скрытую область нижний. Добавьте 40px или более заполнения в <body>. Будьте уверены, чтобы добавить это после основного загрузочного CSS и перед дополнительным адаптивным стиль CSS.

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

body { padding-top: 40px; }

@Ryan, вы правы, жесткое кодирование высоты заставит его работать плохо в случае пользовательских навигационных панелей. Это код, который я использую для 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);         
}); 

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

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

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

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>

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

$(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, есть ли другие причины не подходить к проблеме таким образом? У меня даже есть работа со вторичным navbar, как это:

$('.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'
        });
});

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

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

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


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

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

и добавьте этот небольшой скрипт в голову после включения 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

to

sticky-top

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

о времени они сделали это правильно: 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; } } 

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

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

=требуется twitter-bootstrap-статический / bootstrap.стиль CSS.Эрб

(см. https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)

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

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

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


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

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

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


Я только что завернул navbar в

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

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