Bootstrap right navibar messy how to fix this? - css

Question

I am trying to add the
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>
In the above example, my Logout button is going outside of the nav bar. what is wrong here? how to fix this?

Answer 1

You are taking navbar in side .container class and again the same container class taken after .navbar class as BOOTSTRAP container class have fixed width 1140px + 30px padding for large view so your navbar overflow outside it parent container.
[body > .container > .navbar > .container]
To resolve it you have to remove first .container and put <nav class='navbar'> directly to body tag and put container or container-fluid inside of navbar.
change to [body > .navbar > .container OR .container-fluid]
ONE MORE THING TO SAY
[Practice makes perfect]

Answer 2

It is not going outside of the navbar. You have nested two container. The padding in containerplays the part here.
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
container in bootstrap is 1170px width having padding-right:15px , padding-left:15px .( I am viewing it in a screen resoultion > 1200px) .Your navbar have a total space of 1140px now (1170px - 30px = 1140px) which has a background colore property. As you again adding a container , It is occupying a space of 1170px now which exceeds 1140px. So in both side , a extra 15px white space gote added. Furher , The nested "navbar-right" has "margin-right:-15px" that push your nav further.
Simply construct this way :
<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>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>

Answer 3

This is how a bootstrap navbar is made:
Navbar with no container wrapping it, but a container-fluid inside it:
<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>Other contacts
</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a>
</li>
</ul>
</div>
</nav>
P.S.: view the results in full page for better viewing