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

У меня есть этот код Bootstrap для Twitter

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

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

Ответы

Ответ 1

Добавьте в свой CSS:

body { 
    padding-top: 65px; 
}

В Документах по загрузке:

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

Ответ 2

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

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Ответ 3

Для bootstrap 3 класс navbar-static-top вместо navbar-fixed-top предотвращает эту проблему, если вам не нужно, чтобы навигационная панель всегда была видимой.

Ответ 4

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

измените свой первый "div" с

<div class='navbar navbar-fixed-top'>

к

<div class="navbar navbar-default navbar-static-top">

Ответ 5

Я использую jQuery для решения этой проблемы. Это фрагмент для 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

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

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

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

Ответ 7

В моем проекте, полученном из учебника MVC 5, я обнаружил, что изменение отступов тела не повлияло. Для меня работали следующие:

@media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

Он разрешает случаи, когда navbar складывается в 2 или 3 строки. Это можно вставить в bootstrap.css в любом месте после строк   body {     margin: 0;   }

Ответ 8

Начальный шаблон начальной загрузки v4 css использует:

body {
  padding-top: 5rem;
}

Ответ 9

Как видно на в этом примере из Twitter, добавьте это перед строкой, включающей декларации чувствительных стилей:

<style> 
    body {
        padding-top: 60px;
    }
</style>

Так же:

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

Ответ 10

с navbar navbar-default все работает нормально, но если вы используете navbar-fixed-top, вы должны включить нестандартное тело стиля {padding-top: 60px; } в противном случае он заблокирует содержимое под ним.

Ответ 11

РЕДАКТИРОВАТЬ: Это решение не подходит для более новых версий Bootstrap, где недоступны классы navbar-inverse и navbar-static-top.

Используя MVC 5, то, как я это исправил, состояло в том, чтобы просто добавить свой собственный Site.css, загруженный после других, следующей строкой: body{padding: 0}

и я изменил код в начале _Layout.cshtml, чтобы быть:

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">

Ответ 12

используя percentage, намного лучше, чем pixels.

body {
  padding-top: 10%; //This works regardless of display size.
}

При необходимости вы все равно можете быть явным, добавляя разные breakpoints, как упоминалось в другом ответе @spajus

Ответ 13

Здесь будут две проблемы:

  1. Загрузка страницы (содержимое скрыто)
  2. Внутренние ссылки, подобные этой, будут прокручиваться вверх и скрываться панелью навигации:
<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

Bootstrap 4 с внутренними ссылками на страницы

Для исправления 1), как сказал выше Мартин Бургер, стартовый шаблон начальной загрузки bootstrap v4 использует:

body {
  padding-top: 5rem;
}

Чтобы исправить 2) проверить эту проблему. Этот код в основном работает (но не на втором клике того же хэша):

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

Этот код анимирует ссылки A с помощью jQuery (не slim jQuery):

  // inline theme global code here
  $(document).ready(function() {
    var body = $('html,body'), NAVBAR_HEIGHT = 70;
    function smoothScrollingTo(target) {
      if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
    }
    $('a[href*=\\#]').on('click', function(event){
      event.preventDefault();
      smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
  })

Ответ 14

вы должны добавить

 #page 
 { 
   padding-top: 65px
 }

чтобы не уничтожить липкий нижний колонтитул или что-то еще

Ответ 15

<div class='navbar' data-spy="affix" data-offset-top="0">

Если ваш навигатор находится сверху страницы, установите значение равным 0. В противном случае установите для параметра data-offset-top значение содержимого над навигационной панелью.

Между тем, вам необходимо изменить css как таковой:

.affix{
  width:100%;
  top:0;
  z-index: 10;
}

Ответ 16

Наилучшее решение, которое я нашел на данный момент, которое не требует жесткой высоты кодирования и точек останова, - это добавить дополнительный <nav... к разметке.

<nav class="navbar navbar-expand-md" aria-hidden="true">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>

Делая это таким образом, точки останова @media идентичны, высота идентична (при условии, что ваш navbar-brand является самым высоким объектом в navbar но вы можете легко заменить другой элемент в панели навигации без fixed-top).

Где это не удается, так это с программами чтения с экрана, которые теперь представят 2 navbar-brand. Это указывает на необходимость использования класса not-for-sr чтобы этот элемент не отображался для программ чтения с экрана. Однако этот класс не существует https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Я пытался компенсировать проблему чтения с экрана с помощью aria-hidden="true" но https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/, вероятно, указывает, что это, вероятно, не работает, когда программа чтения с экрана находится в режиме фокусировки, что, конечно, единственный раз, когда вам действительно нужно, чтобы он работал...

Ответ 17

Добавьте к своему JS:

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});

Ответ 18

вы можете установить маржу в зависимости от разрешения экрана

@media screen and (min-width:768px) and (max-width:991px) {
body {
    margin-top:100px;
}

@media screen and (min-width:992px) and (max-width:1199px) {
  body {
    margin-top:50px;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}