Twitter Bootstrap-верхняя панель навигации, блокирующая верхний контент страницы

Question

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

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

265

twitter-bootstrap

автор: jgillich

17 ответов

автор: Akuta · Accepted Answer · 2016-07-13 21:18:35

добавить в CSS:

body { 
    padding-top: 65px; 
}

С Bootstrap docs:

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

автор: Spajus · Accepted Answer · 2013-08-17 19:09:31

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

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

автор: gtrak · Accepted Answer · 2017-11-01 09:31:00

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

автор: catsky · Accepted Answer · 2015-01-26 23:34:32

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

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

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

to

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

автор: Aram Paronikyan · Accepted Answer · 2013-10-17 06:54:32

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

автор: Jason Butler · Accepted Answer · 2016-03-16 01:36:02

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

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

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

автор: PiersB · Accepted Answer · 2014-06-23 12:39:12

в моем проекте, полученном из 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 в любом месте после строк тело { маржа: 0; }

автор: Nabil Kadimi · Accepted Answer · 2013-08-17 19:56:04

Как видно на из 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" />

автор: Martijn Burger · Accepted Answer · 2017-10-17 21:26:51

загрузки В4 стартовый шаблон css применение:

body {
  padding-top: 5rem;
}

автор: Eldiyar Talantbek · Accepted Answer · 2017-01-21 21:31:06

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

автор: Ultroman the Tacoman · Accepted Answer · 2015-10-21 17:50:41

используя MVC 5, я исправил свой, чтобы просто добавить свой собственный сайт.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">

автор: Abhilash · Accepted Answer · 2016-06-23 17:58:10

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

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

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

автор: Michael Cole · Accepted Answer · 2018-02-11 23:59:44

здесь возникнут две проблемы:

загрузка страницы (скрытый контент)
внутренние ссылки, как это будет прокручиваться в верхней части, и будут скрыты navbar:

<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), Как сказал Мартийн Бургер выше, шаблон начальной загрузки V4 css использует:

body {
  padding-top: 5rem;
}

исправить 2) Проверьте этот вопрос. Этот код в основном работает (но не на 2-й щелчок того же хэша):

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

этот код анимирует ссылки с 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);
    });
  })

автор: Sebastian Viereck · Accepted Answer · 2013-08-17 19:14:27

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

 #page 
 { 
   padding-top: 65px
 }

чтобы не разрушить нижний колонтитул, или что-то другое

автор: web fan · Accepted Answer · 2016-01-15 22:41:25

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

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

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

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

автор: cottonova · Accepted Answer · 2018-08-22 13:00:05

добавить в JS:

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

автор: BradDaley · Accepted Answer · 2018-03-17 07:08:40

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

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