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

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

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

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

body { 
    padding-top: 65px; 
}

Из документации по начальной загрузке :

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

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

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

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

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

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

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

в

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

Я использую 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);        
});

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

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

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

В моем проекте, основанном на руководстве по 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;
    }
}

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

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

body {
  padding-top: 5rem;
}

Как видно из этого примера из 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" />

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

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

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) проверить эту проблему . Этот код в основном работает (но не по 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);
    });
  })

Лучшее решение, которое я нашел на данный момент, которое не включает жесткие высоты кодирования и точки останова, - это добавить дополнительный <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панели не- navbar).

Где это терпит неудачу, с программами чтения с экрана, которые теперь представят 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/, кажется, указывает, что это, вероятно, не будет работать, когда программа чтения с экрана в режиме фокуса, который, конечно, единственный раз, когда вам действительно нужно, чтобы он работал ...

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

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

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

РЕДАКТИРОВАТЬ: Это решение не подходит для более новых версий 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">

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

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

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

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

Добавь это:

.navbar {
  position: relative;
}

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

#page {
  padding-top: 65px
}

не разрушать липкий колонтитул или что-то еще

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

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

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

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