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

276

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

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

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

@ user2428107 Этот вопрос был опубликован позже. jazzpi
возможный дубликатtwitter bootstrap navbar fixed top overlapping site user2428107

Ваш Ответ

17   ответов
138

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

Это не сработало для начальной загрузки 3.3.4. Я вижу исправленный пример nav на сайте начальной загрузкиgetbootstrap.com/examples/navbar-fixed-top, Он использует padding-top
ты волшебник гтрак! Большое спасибо!
Это решило проблему. Почему это работает вместо navbar-fixed-top?
Это работает, однако, может оставить некоторое пространство над панелью навигации. Вам может потребоваться изменить site.css и удалить 80px padding-top из тела.
Я перепробовал все, и это единственный ответ, который сработал. Поскольку это наиболее общее решение и не зависит от размера экрана, это должен быть правильный ответ.
4

Бутстрап v4стартовый шаблон css использует:

body {
  padding-top: 5rem;
}
0

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

 #page 
 { 
   padding-top: 65px
 }

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

1

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

  1. Page load (content hidden)
  2. Internal links like this will scroll to the top, and be hidden by the 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 w/ internal page links

Для исправления 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);
    });
  })
57

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

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

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

в

<div class="navbar navbar-default navbar-static-top">
Re: @ DanielC.Sobral response - вы можете заменить его на фиксированный в js, если он прокручивается сверху
Этот ответ лучше, чем утвержденный.
Отлично! Это работало намного лучше, чем добавление отступов.
Статическая навигационная панель исчезает при прокрутке.
Это должен быть правильный ответ.
-1

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

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});
Пожалуйста, добавьте объяснение к вашему коду
2

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

Это не добавляет никакой информации, которой уже нет в других ответах.
4

Как видно наэтот пример из Твиттера, добавьте это перед строкой, которая включает объявления адаптивных стилей:

<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" />
9

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

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

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

Работает для меня тоже
Отчаяние. Отчаяние и испытание ошибка.
Вы правы, он не будет работать со стеком меню без дополнительного кода. Я обычно просто держу свои строки меню на одной линии высоты и превращаю пункты меню в кнопку гамбургера, когда размер сужается.
Какая удачная находка - Что заставило тебя понять это? !!!
Сначала я подумал, что это ответ, и все было готово, чтобы поднять голос. Но потом я понял, что это не работает, когда размер становится достаточно узким, чтобы он мог складывать кнопки меню. :-(
1

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

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

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

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

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

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

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

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

body { 
    padding-top: 65px; 
}

ОтBootstrap документы:

The fixed navbar will overlay your other content, unless you add padding to the top of the body.

См. Дополнительный ответ ниже @Spajus о том, как кодировать это для отзывчивой Bootstrap
В то время как другие ответы решают эту проблему более красноречиво, это официальный ответ, как отмечено в документации по Bootstrap для Fixed Navbarlink
Определенно используйте другой ответ с немного большей краткостью, используя @media (min-width: 980px) {body {padding-top: 60px; }}
Как это будет работать, если пользователь имеет более узкий экран или просто меняет размер окна? Самое верхнее содержимое будет снова заблокировано расширенным разделом навигационной панели.
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;
    }
}

It resolves the cases where the navbar folds into 2 or 3 lines. This can be inserted into bootstrap.css anywhere after the lines body { margin: 0; }

-2

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

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

Я использую 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);        
});
Спасибо, что поделились @Aayush, примените строку к моему CSS!
Большое спасибо за ваше решение. этот ответ сработал для меня как очарование :) Я хотел бы добавить одну вещь. Когда вы загружаете страницу, тело устанавливается сверху, прежде чем оно автоматически подстраивается, потому что jquery не запускается мгновенно. Чтобы сделать это более плавным, я добавил это в CSS body {padding-top: // начальная высота моей панели навигации; } Это помогает в плавном переходе! Еще раз спасибо!
Я использовал изображение поверх навигационной панели и у меня были реальные проблемы со скрытым контентом. Это сработало отлично! Спасибо!
Рад поделиться, спасибо тоже @clamchoda!
Спасибо за вдохновляющее программное решение! У меня есть отличная рабочая реализация в GWT с хорошим инкапсулированным хорошо структурированным кодом ... благодаря отсутствию Javascript ;-)
1

Используя 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">
355

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

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}
Еще более кратко: @media (min-width: 981px) {body {padding-top: 60px; }}
@white_gecko лол. Ага. Это 980 хотел быть просто немного особенным уникальным ;-)
это на самом деле правильный ответ
Отлично. Это действительно должно быть как-то интегрировано в бутстрап. Вы должны раскошелиться и отправить запрос на получение.
@Ted для меня это должно быть min-width: 980px ;-)

Похожие вопросы