Bootstrap navbar-fixed-top не работает

Я пытаюсь создать страницу с фиксированной навигационной панелью в верхней части страницы. Мне нужно что-то вроде this.Bootstrap navbar-fixed-top не работает

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

Вы можете увидеть JsFiddle демо here.

На демо-странице я не добавил ничего нового. Он содержит источник страницы, который ранее был связан с этим вопросом.

это мой навигатор и другой div, которые были помещены в раздел тела на странице.

<!-- Fixed navbar --> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      ....... 
     </button> 
     <a class="navbar-brand" href="#">Bootstrap theme</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</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"> 
       ....... 
      </ul> 
      </li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </nav> 

    <div class="container theme-showcase" role="main"> 
    ..... 
    </div>

Почему я не вижу свою страницу по мере необходимости. Я что-то пропустил в своем коде?

источник

2016-11-26 vigamage

Там нет каких-либо проблем в Html вы должны jst добавить некоторые свойства css, такие как 'padding',' margin', 'position' –

да, я просто понял это. Я думал, что это что-то не так в моем навигаторе. На самом деле я неправильно понял концепцию навигатора. Я думал, что он выделяет некоторое пространство для себя в верхней части тела в дополнение к тому, чтобы быть на вершине страницы все время даже при прокрутке. – vigamage

Добавить CSS:

body { 
    padding-top: 70px; 
}

Вы можете увидеть это путем проверки элемента здесь. Он существует в css. https://getbootstrap.com/examples/navbar-fixed-top/

источник

2016-11-26 14:45:08 Swapna

большое спасибо. Я думал, что это что-то связано с навигационной панелью. – vigamage

В шаблоне Bootstrap они имеют этот CSS код

body { 
    padding-top: 70px; 
    padding-bottom: 30px; 
}

и этот код используется в theme.css файл, который не включен в HTML.

Вы можете решить эту проблему, добавив только код, указанный выше в коде CSS

или вы можете связаться с theme.css файл в вашем HTML код

источник

2016-11-26 14:45:38 Chiller

Bootstrap navbar-fixed-top не работает

ответ

Смежные вопросы