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

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

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

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

Ответ 1

Ваш ответ прямо в документах:

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

Фиксированная панель навигации будет перекрывать ваш другой контент, если вы не добавите padding в верхнюю часть <body>. Попробуйте свои собственные значения или используйте наш фрагмент ниже. Совет: по умолчанию навигационная панель имеет высоту 50 пикселей.
body { padding-top: 70px; }
Обязательно включите это после основного Bootstrap CSS.

и в Bootstrap 4 документа...

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

Ответ 2

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

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

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

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

Ответ 3

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

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

.navbar.navbar-fixed-top

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

Ответ 4

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

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

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

body { padding-top: 40px; }

Ответ 5

@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);         
});

Ответ 6

Я помещаю это перед контейнером урожая:

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

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

EDIT - это работает намного лучше:

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}

Ответ 7

Проблема заключается в 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>

Ответ 8

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

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

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

Ответ 9

Все предыдущие решения с жестким кодом 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'
        });
});

Ответ 10

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

<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>

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

Ответ 11

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

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

navbar-fixed-top

sticky-top

Ссылка на документацию по начальной загрузке

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

Ответ 12

для 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; 
}

Ответ 13

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

@media (min-width: 980px) { body { padding-top: 40px; } }

Ответ 14

использовать этот класс внутри тега nav

class="navbar navbar-expand-lg navbar-light bg-light sticky-top"

Для начальной загрузки 4

Ответ 15

Просто измените fixed-top на sticky-top. Таким образом, вам не придется рассчитывать отступы.
И это работает!

Ответ 16

В ответ на ответ Ник Бисби, если вы используете эту проблему, используя 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, она не вступает в силу.

Ответ 17

Я бы сделал это:

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

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

Ответ 18

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

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

Никакой причудливый фокус, но он сработал.