Bootstrap css скрывает часть контейнера под навигационной панелью navbar-fixed-top

127

Я создаю проект с помощью Bootstrap, и у меня небольшая проблема. У меня есть контейнер под Nav-top. Моя проблема в том, что некоторая часть моего контейнера скрыта под заголовком nav-top. Я не хочу использовать верхнее поле с контейнер. Пожалуйста, см. Ниже html, в котором я столкнулся с проблемой

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>

</head>
<body>
    <div class="navbar navbar-fixed-top ">
        <div class="navbar-inner">
            <div class="container">
           <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
                    </li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <i class="icon-eye-open">
                        </i>Assembly Elections
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
                        </ul>
                         </li><li class="divider-vertical">
                    </li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
             </div>
         </div>
    </div>
  <div  class="container" >
   <ul class="nav nav-pills">
    <li class="active">
    <a href="#">Popular</a>
    </li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Latest</a></li>
    </ul>
   </div>

    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/bootstrap-dropdown.js"></script>
    <script src="~/Scripts/Collapse.js"></script>
</body>
</html>
css twitter-bootstrap Аджай Бенивал
источник
Из документации по загрузке: Исправлено вверху. Добавьте .navbar-fixed-top и не забудьте учесть скрытую область под ним, добавив к <body> отступ не менее 40 пикселей. Не забудьте добавить это после основного CSS Bootstrap и перед необязательным отзывчивым CSS.
cms_mgr 06

Ответы:

215

Для этого paddingнужно добавить немного в начало файла <body>.

Согласно документации Bootstrap.navbar-fixed-top , попробуйте свои собственные значения или используйте наш фрагмент ниже. Подсказка: По умолчанию, navbarявляется 50pxвысокой.

  body {
    padding-top: 70px;
  }

Также взгляните на исходный код этого примера и откройте его starter-template.css.

Питер
источник
1
Я добавил 60 пикселей между отзывчивым CSS и обычным CSS, и он работал нормально
Аджай Бенивал
1
проблема в том, что ... если я настраиваю начальную загрузку с помощью ссылки настройки ... тогда я не получаю отзывчивый css отдельно ... поэтому нет никакого способа предоставить это "между" двумя объявлениями. Также этот совет add-some-tag-between-my-normal-and-responsive-css ... кажется немного хакерским. Не так ли? Должно быть лучшее решение, чем это.
VJ.
Если вы используете LESS, используйте переменную начальной загрузки @ navbar-height, чтобы найти высоту навигационной панели.
yankee
3
Это скорее обходной путь, чем решение: хотя это помогает с верхней частью страницы, якоря и тому подобное по-прежнему не работают. Если вы прокрутите до подраздела с помощью якорей, заголовок подраздела будет за панелью навигации.
мастов 05
1
почему это начинает происходить с самого начала, кто-нибудь знает? это просто начало происходить со мной, что казалось из ниоткуда, и я до сих пор не могу найти источник того, что сломало это с самого начала.
Тейлор Браун
37

Я предполагаю, что проблема связана с динамической высотой фиксированной панели навигации вверху. Например, когда пользователь входит в систему, вам нужно отобразить какое-то « Hello [User Name] », а когда имя слишком широкое, панели навигации нужно использовать большую высоту, чтобы этот текст не перекрывался с меню панели навигации . Так как панель навигации имеет стиль « position: fixed », тело остается под ней, а более высокая часть становится скрытой, поэтому вам нужно «динамически» изменять отступ вверху каждый раз, когда изменяется высота панели навигации, что произойдет в следующем сценарии случая:

  1. Страница загружается / перезагружается.
  2. Размер окна браузера изменен, так как это может привести к срабатыванию другой ответной точки останова.
  3. Navbar содержание изменяется прямо или косвенно , как это может спровоцировать изменение высоты.

Эта динамичность не покрывается обычным CSS, поэтому я могу придумать только один способ решить эту проблему, если у пользователя включен JavaScript . Пожалуйста, попробуйте следующий фрагмент кода jQuery, чтобы разрешить сценарии 1 и 2; в случае сценария 3 не забудьте вызвать функцию onResize () после любого изменения содержимого панели навигации :

var onResize = function() {
  // apply dynamic padding at the top of the body according to the fixed navbar height
  $("body").css("padding-top", $(".navbar-fixed-top").height());
};

// attach the function to the window resize event
$(window).resize(onResize);

// call it also when the page is ready after load or reload
$(function() {
  onResize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Развернуть фрагмент

LuckyBrain
источник
Это то, что я искал. Оптимизировал его, сохранив ширину окна и проверив, изменилось ли только вертикальное изменение размера.
Ripside
20

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

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>
move.over
источник
8
Это отвратительный способ делать что-то.
DotSlashCoding
Закрыть, но не учитывает перенос элементов на реальной панели навигации - если вы не дублируете там все меню.
Ripside
Согласитесь с @DotSlashCoding, этот подход не является хорошей практикой кодирования (не проходит тест на ремонтопригодность без уважительной причины). Сразу непонятно, что navbarделает это дополнение .
хрупкие окна 07
Прагматично и круто. Я тоже считаю, что все решения этого вопроса отвратительны.
де.
8

Это происходит потому, что с navbar-fixed-topклассом навигационная панель получает расширение position:fixed. Это, в свою очередь, выводит панель навигации из потока документов, оставляя тело, занимающее пространство позади занимающее панелью навигации.

Вам необходимо подать заявку padding-topили margin-topна ваш container, в зависимости от ваших требований с ценностями>= 50px . (или поиграйте с другими значениями)

Базовая навигационная панель начальной загрузки занимает примерно высоту 40px. Так что, если вы даете padding-topили margin-topиз 50px или более, вы всегда будете иметь , что передышку между вашим контейнером и навигационной панелью.

Правин Апулия
источник
6

У меня тоже была эта проблема, но я решил ее без скрипта и только с помощью CSS. Я начинаю с рекомендованного padding-top для фиксированного меню, устанавливая 60 пикселей, описанных на веб-сайте Bootstrap. Затем я добавил три медиа-тега, которые изменяют размер отступов в точках отсечения, где также изменяется размер моего меню.

<style>      
    body{
        padding-top:60px;
    }
    /* fix padding under menu after resize */
    @media screen and (max-width: 767px) {
        body { padding-top: 60px; }
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        body { padding-top: 110px; }
    }
    @media screen and (min-width: 992px) {
        body { padding-top: 60px; }
    }
</style>

Одно примечание: когда ширина моего меню составляет от 768 до 991, логотип меню в моем макете плюс <li> параметры заставляют меню переноситься на две строки. Поэтому мне пришлось настроить padding-top, чтобы меню не перекрывало контент, отсюда 110 пикселей.

Надеюсь это поможет...

Харви Мушман
источник
6

Я знаю, что эта ветка устарела, но я только что столкнулся с этой проблемой и исправил ее, просто используя page-headerкласс на моей странице под навигацией. Также я использовал <nav>тег вместо, <div>но я не уверен, что он будет иметь другое поведение.

Используя в page-headerкачестве контейнера для страницы, вам не придется возиться с ним <body>, только если вы не согласны с пространством по умолчанию, которое page-headerпредоставляет вам.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



   <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top">
    
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Bootstrap</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                </ul>
                <div class="navbar-right">
                </div>
            </div>
        </nav>
    </div>
    <div class="page-header">
        <div class="clearfix">
            <div class="col-md-12">
                <div class="col-md-8 col-sm-6 col-xs-12">
                    <h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
                </div>
            </div>
        </div>
    </div>
        <div class="container">
        <div class="row">
            <form role="form">
                <div class="col-lg-6">
                    <div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
                    <div class="form-group">
                        <label for="InputName">Enter Name</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Enter Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Confirm Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputMessage">Enter Message</label>
                        <div class="input-group">
                            <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
                </div>
            </form>
    </div>
Развернуть фрагмент

Zorkind
источник
3

я решил это с помощью jquery

<script type="text/javascript">
$(document).ready(function(e) {
   var h = $('nav').height() + 20;
   $('body').animate({ paddingTop: h });
});
</script>
Развернуть фрагмент

CruzDelSur
источник