Twitter начальной загрузки navbar, в фиксированное верхнее перекрытие сайте

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



.navbar.navbar-fixed-top

  .navbar-inner

    .container

.container

  .row

    //yield content


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

638   16  

16 ответов:

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

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

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

body { padding-top: 70px; }

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

и Bootstrap 4 доктора...

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

454  
2018-08-20 17:55:23

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

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

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

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

112  
2012-10-24 17:56:58

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

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

.navbar.navbar-fixed-top

до

.navbar.navbar-default.navbar-static-top
27  
2015-06-19 01:04:10

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

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

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

body { padding-top: 40px; }
25  
2012-10-15 00:35:35

@ 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);         
});
23  
2013-10-17 09:50:54

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

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

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

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

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}
19  
2012-12-22 18:28:08

проблема заключается в navbar-fixed-top, который будет накладывать содержимое, если не указать Body-padding. Никакое решение, представленное здесь, не работает в 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>
15  
2015-01-11 00:48:26

все предыдущие решения жесткий код 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-классов (или может использовать идентификаторы): 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'
        });
});
14  
2013-08-05 18:20:46

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

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

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

14  
2016-03-16 03:44:49

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

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

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

10  
2014-05-29 10:24:25

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

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

navbar-fixed-top

до

sticky-top

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

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

4  
2018-07-20 16:35:47

для Bootstrap 3.+ , Я бы использовал следующий CSS для исправления проблемы navbar-fixed-top и anchor jump overlapped на основе 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; 
}
3  
2014-12-06 10:42:56

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

@media (min-width: 980px) { body { padding-top: 40px; } }
1  
2014-08-13 05:13:23

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

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

=требуется twitter-bootstrap-static / 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 тела, он не вступит в силу.

0  
2014-06-23 19:54:17

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

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

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

0  
2015-04-30 21:29:12

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

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

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

-4  
2014-03-05 03:19:41

Comments

    Ничего не найдено.
Click here to cancel reply.