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

Question

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

250

У меня есть этот код 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>

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

GeekedOut 26 апр. 2012, в 15:56

Источник

1

возможно дублирование твиттер-загрузчика navbar с фиксированным верхним перекрытием сайта
user2428107 15 апр. 2014, в 06:34
1

@ user2428107 Этот вопрос был опубликован позже.
jazzpi 25 июнь 2015, в 14:26

Теги:

twitter-bootstrap

14 ответов

315

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

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

Spajus 13 июнь 2012, в 05:33

17

Отлично. Это действительно должно быть как-то интегрировано в бутстрап. Вы должны раскошелиться и отправить запрос на получение.
brittohalloran 27 июль 2012, в 13:57
1

Хорошее решение, но есть еще что-то не решенное. Посмотрите на этот вопрос, который я только что задал, и посмотрите, сможет ли кто-нибудь помочь. stackoverflow.com/questions/12763707/...
ElPiter 06 окт. 2012, в 20:45
27

Еще более кратко: @media (min-width: 981px) {body {padding-top: 60px; }}
Ted 22 окт. 2012, в 21:54
4

@Ted для меня это должно быть min-width: 980px ;-)
white_gecko 09 нояб. 2012, в 17:07
3

@white_gecko лол. Ага. Это 980 хотел быть просто немного особенным уникальным ;-)
Ted 23 нояб. 2012, в 00:44
2

это на самом деле правильный ответ
cristi _b 10 фев. 2013, в 11:41
0

У меня была проблема в IE8 с использованием решения Теда. После изменения решения Спаюса, он работает лучше в IE8. Это связано с тем, что тип @media не работает в IE8.
Jan-Terje Sørensen 14 фев. 2013, в 14:38
0

Это всегда весело, чтобы добавить это в минимизированный файл CSS. :)
whirlwin 02 апр. 2013, в 20:04
1

<style>body {padding-top: 60px;}</style> только <style>body {padding-top: 60px;}</style> , при условии, что вы поместите этот код перед включением таблицы стилей для адаптивного дизайна. Пример (см. Исходный код) twitter.github.io/bootstrap/examples/fluid.html - PS. Как вы уже догадались, это объявление внутри медиа-запроса уже присутствует в отзывчивой таблице стилей.
Nabil Kadimi 05 май 2013, в 00:30
0

Большое спасибо, удивленный, обнаружив, что это все еще проблема через год.
Bjørn Otto Vasbotten 09 нояб. 2013, в 20:57
0

Может быть, это глупый вопрос, но куда именно ты это положил? в файле CSS? заменить существующий тег тела?
The Dude 16 июнь 2015, в 12:01
0

@brittohalloran Если я правильно помню, они ведут себя так же, как в следующем Bootstrap4.
GeorgeWL 06 май 2016, в 10:27
0

Я не понимаю Не приведет ли это решение к появлению проблемы блокировки контента на устройствах с размером экрана менее 979 пикселей? Потому что это именно то, что я вижу, когда я изменяю размер окна моего браузера ...
Rajshri Mohan K S 21 авг. 2016, в 11:04
1

Спасибо за ответ! Мне интересно, что это нужно добавить. Я был уверен, что bootstrap создаст отступ самостоятельно, и все его контейнеры следуют друг за другом ....
Alex Cio 06 сен. 2016, в 02:14

Показать ещё 12 комментариев

120

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

gtrak 09 окт. 2013, в 05:29

2

Это работает, однако, может оставить некоторое пространство над панелью навигации. Вам может потребоваться изменить site.css и удалить 80px padding-top из тела.
ZZZ 07 янв. 2015, в 06:07
9

Я перепробовал все, и это единственный ответ, который сработал. Поскольку это наиболее общее решение и не зависит от размера экрана, это должен быть правильный ответ.
Blairg23 06 фев. 2015, в 00:44
1

Это решило проблему. Почему это работает вместо navbar-fixed-top?
hlyates 23 фев. 2015, в 17:09
0

Это не сработало для начальной загрузки 3.3.4. Я вижу исправленный пример навигации на сайте начальной загрузки getbootstrap.com/examples/navbar-fixed-top , он использует padding-top
Alireza Fattahi 20 апр. 2015, в 05:03
1

ты волшебник гтрак! Большое спасибо!
r3r57 29 сен. 2015, в 03:21
0

Это должен быть принятый ответ, большое спасибо!
Stefan Svrkota 06 окт. 2016, в 10:10
0

То, что сказал ZZZ об избавлении от пустого пространства, которое появляется над панелью навигации, мне не помогло. Кто-нибудь знает, как избавиться от пустого пространства, которое появляется над панелью навигации при переключении с navbar-fixed-top на navbar-static-top?
user2075599 22 апр. 2017, в 08:43
0

в то время как это работает, он делает навигационную панель статической, а не фиксированной. это означает, что при прокрутке вниз навигационная панель исчезнет ... по крайней мере, для меня это не хорошо.
tbkn23 06 янв. 2018, в 09:37
0

Я хочу, чтобы навигационная панель всегда была видимой, как я могу иметь фиксированную навигационную панель без блокировки верхнего содержимого? Я использую бутстрап 3
Jill 24 авг. 2018, в 10:26

Показать ещё 7 комментариев

56

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

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

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

к

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

catsky 27 янв. 2015, в 01:26

3

Это должен быть правильный ответ.
Aline Matos 24 июнь 2015, в 13:28
22

Статическая навигационная панель исчезает при прокрутке.
Daniel C. Sobral 23 июль 2015, в 14:02
0

Этот ответ лучше, чем утвержденный.
tryp 12 дек. 2015, в 22:21
1

Re: @ DanielC.Sobral response - вы можете заменить его на фиксированный в js, если он прокручивается сверху
obie 07 янв. 2016, в 12:55
1

Отлично! Это работало намного лучше, чем добавление отступов.
Schylar 21 июль 2016, в 15:02

Показать ещё 3 комментария

15

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

Aram Paronikyan 17 окт. 2013, в 08:17

2

Я использовал изображение поверх панели навигации и у меня были реальные проблемы со скрытым контентом. Это сработало отлично! Спасибо!
Richard Varno 19 май 2014, в 03:44
2

Большое спасибо за ваше решение. этот ответ сработал как очарование для меня :) Я хотел бы добавить одну вещь. Когда вы загружаете страницу, тело устанавливается сверху, прежде чем оно автоматически подстраивается, потому что jquery не запускается мгновенно. Чтобы сделать это более плавным, я добавил это в CSS body {padding-top: // начальная высота моей панели навигации; } Это помогает в плавном переходе! Еще раз спасибо!
Aayush 13 дек. 2014, в 06:53
0

Спасибо, что поделились @Aayush, примените строку к моему CSS!
Aram Paronikyan 14 дек. 2014, в 18:33
0

Спасибо @AramParonikyan Лучшее решение, которое я нашел!
clamchoda 07 май 2015, в 16:14
2

Рад поделиться, спасибо тоже @clamchoda!
Aram Paronikyan 07 май 2015, в 19:29
1

Спасибо за вдохновляющее программное решение! Теперь у меня есть отличная рабочая реализация в GWT с хорошим инкапсулированным хорошо структурированным кодом ... благодаря отсутствию Javascript ;-)
Alex Worden 13 март 2016, в 20:15

Показать ещё 4 комментария

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>

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

Jason Butler 16 март 2016, в 02:07

1

Работает для меня тоже
Arun Agarwal 14 май 2016, в 08:02
0

Какая удачная находка - Что заставило тебя понять это? !!!
ferdil 13 окт. 2016, в 17:28
2

Отчаяние. Отчаяние и проба и ошибка.
Jason Butler 15 окт. 2016, в 02:02
0

Сначала я думал, что это ответ, и все было готово, чтобы поднять голос. Но потом я понял, что это не работает, когда размер становится достаточно узким, чтобы складывать кнопки меню. :-(
Steve In CO 01 нояб. 2016, в 20:50
0

Вы правы, это не будет работать со стеком меню без дополнительного кода. Я обычно просто держу свои строки меню на одной линии высоты и превращаю пункты меню в кнопку гамбургера, когда размер сужается.
Jason Butler 04 нояб. 2016, в 17:07
0

Я понятия не имею, почему, но это работает. Вы можете уточнить, почему это работает?
red security 12 фев. 2017, в 08:00
0

Отличная идея! так как это полезно, когда на некоторых страницах есть панель навигации, а на некоторых нет, так как невозможно отличить ее от файла CSS.
Laurent 17 июнь 2017, в 11:00
0

Это определенно путь. Он работает на всех устройствах, даже если навигационная панель разбита на две строки. +1
OverlordvI 01 янв. 2018, в 20:34
0

Не работает содержимое в верхней части тела по-прежнему будет покрываться панелью навигации, если высота панели увеличивается из-за дополнительных элементов на основе ролей на iPad. Я пытаюсь избежать добавления <div class = "top-buffer"> </ div>
Oracular Man 02 май 2018, в 19:43

Показать ещё 7 комментариев

6

В моем проекте, полученном из учебника 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; }

PiersB 23 июнь 2014, в 12:58

3

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

Nabil Kadimi 05 май 2013, в 01:07

2

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

Eldiyar Talantbek 21 янв. 2017, в 22:40

1

Это не добавляет никакой информации, которой нет в других ответах.
Tom Zych 21 янв. 2017, в 21:56

1

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

body {
  padding-top: 5rem;
}

Martijn Burger 17 окт. 2017, в 22:52

1

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

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

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

Abhilash 23 июнь 2016, в 18:34

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

Ultroman the Tacoman 22 авг. 2014, в 12:50

0

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

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

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

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

web fan 15 янв. 2016, в 23:33

0

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

 #page 
 { 
   padding-top: 65px
 }

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

slaver113 15 март 2013, в 17:31

Ещё вопросы

возможно дублирование твиттер-загрузчика navbar с фиксированным верхним перекрытием сайта
@ user2428107 Этот вопрос был опубликован позже.
Отлично. Это действительно должно быть как-то интегрировано в бутстрап. Вы должны раскошелиться и отправить запрос на получение.
Хорошее решение, но есть еще что-то не решенное. Посмотрите на этот вопрос, который я только что задал, и посмотрите, сможет ли кто-нибудь помочь. stackoverflow.com/questions/12763707/...
Еще более кратко: @media (min-width: 981px) {body {padding-top: 60px; }}
@Ted для меня это должно быть min-width: 980px ;-)
@white_gecko лол. Ага. Это 980 хотел быть просто немного особенным уникальным ;-)
это на самом деле правильный ответ
У меня была проблема в IE8 с использованием решения Теда. После изменения решения Спаюса, он работает лучше в IE8. Это связано с тем, что тип @media не работает в IE8.
Это всегда весело, чтобы добавить это в минимизированный файл CSS. :)
<style>body {padding-top: 60px;}</style> только <style>body {padding-top: 60px;}</style> , при условии, что вы поместите этот код перед включением таблицы стилей для адаптивного дизайна. Пример (см. Исходный код) twitter.github.io/bootstrap/examples/fluid.html - PS. Как вы уже догадались, это объявление внутри медиа-запроса уже присутствует в отзывчивой таблице стилей.
Большое спасибо, удивленный, обнаружив, что это все еще проблема через год.
Может быть, это глупый вопрос, но куда именно ты это положил? в файле CSS? заменить существующий тег тела?
@brittohalloran Если я правильно помню, они ведут себя так же, как в следующем Bootstrap4.
Я не понимаю Не приведет ли это решение к появлению проблемы блокировки контента на устройствах с размером экрана менее 979 пикселей? Потому что это именно то, что я вижу, когда я изменяю размер окна моего браузера ...
Спасибо за ответ! Мне интересно, что это нужно добавить. Я был уверен, что bootstrap создаст отступ самостоятельно, и все его контейнеры следуют друг за другом ....
Это работает, однако, может оставить некоторое пространство над панелью навигации. Вам может потребоваться изменить site.css и удалить 80px padding-top из тела.
Я перепробовал все, и это единственный ответ, который сработал. Поскольку это наиболее общее решение и не зависит от размера экрана, это должен быть правильный ответ.
Это решило проблему. Почему это работает вместо navbar-fixed-top?
Это не сработало для начальной загрузки 3.3.4. Я вижу исправленный пример навигации на сайте начальной загрузки getbootstrap.com/examples/navbar-fixed-top , он использует padding-top
ты волшебник гтрак! Большое спасибо!
Это должен быть принятый ответ, большое спасибо!
То, что сказал ZZZ об избавлении от пустого пространства, которое появляется над панелью навигации, мне не помогло. Кто-нибудь знает, как избавиться от пустого пространства, которое появляется над панелью навигации при переключении с navbar-fixed-top на navbar-static-top?
в то время как это работает, он делает навигационную панель статической, а не фиксированной. это означает, что при прокрутке вниз навигационная панель исчезнет ... по крайней мере, для меня это не хорошо.
Я хочу, чтобы навигационная панель всегда была видимой, как я могу иметь фиксированную навигационную панель без блокировки верхнего содержимого? Я использую бутстрап 3
Это должен быть правильный ответ.
Статическая навигационная панель исчезает при прокрутке.
Этот ответ лучше, чем утвержденный.
Re: @ DanielC.Sobral response - вы можете заменить его на фиксированный в js, если он прокручивается сверху
Отлично! Это работало намного лучше, чем добавление отступов.
Я использовал изображение поверх панели навигации и у меня были реальные проблемы со скрытым контентом. Это сработало отлично! Спасибо!
Большое спасибо за ваше решение. этот ответ сработал как очарование для меня :) Я хотел бы добавить одну вещь. Когда вы загружаете страницу, тело устанавливается сверху, прежде чем оно автоматически подстраивается, потому что jquery не запускается мгновенно. Чтобы сделать это более плавным, я добавил это в CSS body {padding-top: // начальная высота моей панели навигации; } Это помогает в плавном переходе! Еще раз спасибо!
Спасибо, что поделились @Aayush, примените строку к моему CSS!
Спасибо @AramParonikyan Лучшее решение, которое я нашел!
Рад поделиться, спасибо тоже @clamchoda!
Спасибо за вдохновляющее программное решение! Теперь у меня есть отличная рабочая реализация в GWT с хорошим инкапсулированным хорошо структурированным кодом ... благодаря отсутствию Javascript ;-)
Какая удачная находка - Что заставило тебя понять это? !!!
Отчаяние. Отчаяние и проба и ошибка.
Сначала я думал, что это ответ, и все было готово, чтобы поднять голос. Но потом я понял, что это не работает, когда размер становится достаточно узким, чтобы складывать кнопки меню. :-(
Вы правы, это не будет работать со стеком меню без дополнительного кода. Я обычно просто держу свои строки меню на одной линии высоты и превращаю пункты меню в кнопку гамбургера, когда размер сужается.
Я понятия не имею, почему, но это работает. Вы можете уточнить, почему это работает?
Отличная идея! так как это полезно, когда на некоторых страницах есть панель навигации, а на некоторых нет, так как невозможно отличить ее от файла CSS.
Это определенно путь. Он работает на всех устройствах, даже если навигационная панель разбита на две строки. +1
Не работает содержимое в верхней части тела по-прежнему будет покрываться панелью навигации, если высота панели увеличивается из-за дополнительных элементов на основе ролей на iPad. Я пытаюсь избежать добавления <div class = "top-buffer"> </ div>
Это не добавляет никакой информации, которой нет в других ответах.

Akuta · Accepted Answer · 2012-04-26T16-06-00.000Z

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

body { 
    padding-top: 65px; 
}

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

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

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