Bootstrap Navbar Fixed to Top

Question

Итак, у меня есть стандартный навигатор из Bootstrap внутри контейнера, который также оформлен бутстрапом.

<div class="container"> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Nav Bar Goes On From Here. Only Posted this as an examlpe --> 

Теперь, когда я добавил navbar-fixed-top класс навигационной панели, он вышел из контейнера и заполняет слева направо на экране. Я понимаю, что это поведение по умолчанию для Bootstrap, но как я могу поддерживать его ширину? И делайте это так, чтобы реагировать.

Answer 1

container-fluid должна быть полной ширины, в зависимости от начальной загрузки документации. Если вы измените его на другой container, это поможет?

Answer 2

использование этого

@media (min-width: 1200px) { 
    .navbar { 
     position: fixed !important; 
     top: 0px; 
     width: 940px; 
    } 
} 

или добавить класс контейнер для навигационного бара

Answer 3

CSS-код для .navbar фиксированной вершины довольно прямо вперед:

.navbar-fixed-top, 
.navbar-fixed-bottom { 
    position: fixed; 
    right: 0; 
    left: 0; 
    border-width: 0 0 1px; 
} 

плюс

.navbar-fixed-top { 
    top: 0; 
} 

(Я думаю, что ' s, что имеет версия запаса.)

Если вы хотите, чтобы она была прикреплена к верхней части, но не хотела, чтобы она была полной ширины, то вам действительно не нужно navbar-fixed-top. Вы просто хотите добавить что-то вроде «top: 0» в свой стиль/класс для вашего навигатора.

Answer 4

Если добавить контейнер в < нав />

Вы получаете следующее: http://jsfiddle.net/bo9jgpk2/

<nav class="navbar navbar-default navbar-fixed-top container" role="navigation">