У мене є цей код завантаження у 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>

Але коли я переглядаю початок сторінки, панель навігації блокує частину вмісту, що знаходиться вгорі сторінки. Будь-яка ідея, як змусити її натискати на решту вмісту нижче, коли переглядається верхню частину сторінки, щоб вміст не блокувався панеллю навігації?

Додати у свій CSS:

body { 
    padding-top: 65px; 
}

З документів Bootstrap :

Фіксований навбар буде накладати ваш інший вміст, якщо ви не додасте накладки на верхню частину тіла.

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

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

Для завантажувального третього класу клас 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; }

У css шаблоні запуску 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- fix -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! -->

Завантажувальна програма 4 вт / посилання на внутрішню сторінку

Щоб виправити 1), як сказала вище Мартійн Бургер, в css шаблоні запуску bootstrap v4 використовується:

body {
  padding-top: 5rem;
}

Щоб виправити 2) перевірте цю проблему . Цей код здебільшого працює (але не на другому клацанні того ж хеша):

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

Цей код оживляє посилання на jQuery (не тонкий 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 ненові панелі.

Якщо це не вдається - з екранами, які тепер представлять 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

EDIT: Це рішення не є життєздатним для новіших версій 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;
}