Bootstrap right navibar messy, как это исправить?

Question

Я пытаюсь добавить

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<nav class="navbar navbar-default"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="navbar-header"> 
 
\t \t \t \t <a class="navbar-brand" href="#">Mean Office</a> 
 
\t \t \t </div> 
 
\t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t <li><a href="" title="">Other contacts</a></li> 
 
\t \t \t \t <li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </nav> 
 
    </div>

В приведенном выше примере, моя кнопка Выход происходит за пределами панели навигации. что здесь не так? как это исправить?

Answer 1

Вы принимаете Navbar в стороне .container class и опять же container class приняты после того, как .navbar class Bootstrap класс контейнера имеет фиксированную ширину 1140px + 30px отступы для большого поля зрения, чтобы перелив Navbar вне его родительский контейнер.

[body > .container > .navbar > .container]

Чтобы устранить его, вы должны удалить первую .container и положить <nav class='navbar'> непосредственно тело тега и поместить контейнер или контейнер-жидкость внутри навигационной панели.

изменение [body > .navbar > .container OR .container-fluid]

еще одно СКАЗАТЬ

[ученья]

Answer 2

Не выходя за пределы навигационной панели. У вас вложен два контейнера. Здесь добавлена ​​прокладка в container.

<div class="container"> 
<nav class="navbar navbar-default"> 
     <div class="container"> 

container в начальной загрузки является 1170px ширина, имеющий padding-right:15px , padding-left:15px (я его просмотра в resoultion экрана> 1200px) .Your Navbar имеют общее пространство 1140px теперь. (1170px - 30px = 1140px), который имеет фоновый Colore имущество. Когда вы снова добавляете контейнер, он занимает пространство 1170px сейчас, что превышает 1140px. Таким образом, в обеих сторонах добавлено дополнительное 15-кратное белое пространство. Furher, Вложенные «navbar-right» имеют «margin-right:-15px», которые далее нажмите nav.

Просто построить таким образом:

<div class="container"> 
    <nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Mean Office</a> 
    </div> 
    <div> 
     <ul class="nav navbar-nav navbar-right "> 
     <li><a href="" title="">Other contacts</a></li> 
     <li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li> 
     </ul> 
    </div> 
    </nav> 
</div> 

Answer 3

Это как делается самозагрузки Navbar:

Navbar, не container окружив его, но container-fluid внутри него:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">Mean Office</a> 
 
    </div> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="" title="">Other contacts</a> 
 
     </li> 
 
     <li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

P.S .: Посмотреть результаты на полную страницу для лучшего просмотра