Twitter Bootstrap Navbar с фиксированным верхним перекрытием сайта

314

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

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

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

Теги:
haml

17 ответов

488
Лучший ответ

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

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

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

body { padding-top: 70px; }

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

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

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

Поделиться
  • 14
    Но когда вы минимизируете окно, после 40px появляется панель навигации, как мне ее обработать?
  • 5
    Это появляется после 40px, вероятно, потому что вы не «добавляете это после основного Bootstrap CSS и до необязательного адаптивного CSS».
Показать ещё 7 комментариев
115

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

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

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

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

Поделиться
  • 1
    Это решение также идет между ядром Bootstrap CSS и адаптивным импортом CSS? Я по-прежнему вижу разрыв, когда ширина окна меньше 980. Я предполагаю, что последующий импорт адаптивных переопределений CSS будет изменен. Если я перенесу это решение в режим адаптивного импорта CSS, то получу заполнение тела и дополнительную строку в строке меню.
  • 0
    Я использую Twitter Bootstrap 2.3.2. Я заметил, что документ больше не содержит предложение 40px, хотя потребность все еще существует.
Показать ещё 3 комментария
29

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

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

.navbar.navbar-fixed-top

к

.navbar.navbar-default.navbar-static-top
Поделиться
  • 0
    ты просто троллинг? или я что-то наблюдал?
  • 0
    Как это получило 10 голосов? navbar-default просто добавляет цвет и цвет фона ...
Показать ещё 5 комментариев
26

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

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

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

body { padding-top: 40px; }
Поделиться
  • 9
    Но когда вы минимизируете окно, после 40px появляется панель навигации, как мне ее обработать?
  • 1
    да, это решение не работает на экранах мобильных устройств. Фактически, в широкоэкранном режиме на моем телефоне это делает сайт бесполезным.
Показать ещё 1 комментарий
22

@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);         
});
Поделиться
  • 3
    Вместо использования parseInt для css-значений высоты, я просто использовал $('#main-navbar').height() , но в остальном это было очень полезно и решило мою проблему, спасибо.
19

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

<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;
  }
}
Поделиться
16

Проблема заключается в 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>
Поделиться
  • 1
    Да, это лучше, потому что заполнение тела является динамическим для каждого размера экрана, их решение не является хорошим.
  • 0
    Но затем есть полоса пустого белого пространства над панелью навигации.
Показать ещё 2 комментария
14

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

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

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

Поделиться
  • 0
    Это то, что мы делаем ... помещаем содержимое тела в правильное место без кода js, догадок или чего-либо еще. ,
  • 1
    Thid заслуживает большего количества голосов, работает отлично, ужасно, но только код: D
Показать ещё 2 комментария
14

Все предыдущие решения с жестким кодом 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'
        });
});
Поделиться
  • 0
    Просто к сведению, я использую это, и это прекрасно работает, но по какой-то странной причине, если у меня есть две панели навигации, один нормальный размер и один для маленьких экранов, это работает только на большем?
  • 0
    @LiamDawe, может быть, у вас есть более одного «.user-top» (например) на странице, в этом случае .height () может запутаться ...?
11

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

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

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

Поделиться
  • 0
    Мне пришлось изменить вторую ссылку на высоту в вашем примере, чтобы она была $ ('# topnavbar'). Height (), и тогда это отлично сработало для меня. Спасибо!
  • 1
    Спасибо за комментарий! Я исправил это в ответе.
Показать ещё 1 комментарий
6

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

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

navbar-fixed-top

в

sticky-top

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

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

Поделиться
  • 0
    Некоторые люди могут использовать фиксированный верх, чтобы видеть ссылки при прокрутке страницы вниз; хотя эта функция может быть полезна, если вы не заботитесь об этом :)
3

для 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; 
}
Поделиться
  • 0
    Та же проблема, хороший ответ.
1

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

@media (min-width: 980px) { body { padding-top: 40px; } }
Поделиться
0

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

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

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

Поделиться
0

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

Поделиться
-1

использование

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

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

Поделиться
  • 0
    Я никогда не узнаю, почему за него проголосовали, так как он работал на меня и всех остальных.
-4

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

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

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

Поделиться
  • 0
    Ваш ответ неясен и не решает проблему. При чем nav-? ?? представлять?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню