Bootstrap-Navigationsleistenabstand rechts

Question

In meiner Bootstrap-Webanwendung befindet sich auf der Kopfzeile der Navigationsleiste auf der rechten Seite kein Platz. Und der Logout-Link ist sehr nah an der rechten Grenze.

Wie kann ich etwas Platz auf der rechten Seite geben?

Image:

index.html

<!-- Start of Navigation Menu --> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="listController"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <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" rel="home" href="#/list">My Project</a> 


     </div> 

     <div class="collapse navbar-collapse"> 

      <div class="bgContainer" style="background-image: url('images/bg_header.gif');"> 

       <ul class="nav navbar-nav"> 
        <li><a href="#/list"><i class="glyphicon glyphicon-registration-mark"></i>List</a></li> 
        <li><a href="#/two"><i class="glyphicon glyphicon-fire"></i> Two</a></li> 


        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-leaf"></i> Calendar <b 
          class="caret"></b></a> 
         <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
          <li><a href="#/"><i class="glyphicon glyphicon-eye-open"></i> View Submission </a></li> 
          <li><a href="#/"><i class="glyphicon glyphicon-eye-open"></i> View Submission </a></li> 
          <li><a href="#/"><i class="glyphicon glyphicon-calendar"></i> Report </a></li> 
          <li><a href="#/"><i class="glyphicon glyphicon-list-alt"></i> Template - </a></li> 
          <li><a href="#/"><i class="glyphicon glyphicon-book"></i> Calendar</a></li> 
          <li class="dropdown-submenu"><a tabindex="-1"> <i class="glyphicon glyphicon-cog"></i>Generate 
          </a> 
           <ul class="dropdown-menu"> 
            <li><a href="#/"><i class="glyphicon glyphicon-cog"></i> Report </a></li> 
            <li><a href="#/"><i class="glyphicon glyphicon-cog"></i> Draft </a></li> 
           </ul></li> 
          <li><a href="#/"><i class="glyphicon glyphicon-eye-open"></i> Feedback</a></li> 
         </ul></li> 




        <li><a href="dashboard"><i class="glyphicon glyphicon-blackboard"></i> Dashboard</a></li> 
       </ul> 


       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> 
           {{fullName}} <span class="caret"></span></a> 
          <ul id="g-account-menu" class="dropdown-menu" role="menu"> 
           <li><a href="#/underConstruction">My Profile</a></li> 
          </ul></li> 
         <li><a href="#/underConstruction"><i class="glyphicon glyphicon-lock"></i> Logout </a></li> 
         <!-- Spacer --> 
         <li>  </li> 
        </ul> 
       </div> 
      </div> 

     </div> 
    </div> 
    <!-- End of Navigation Menu --> 

Answer 1

Verwendung Dies könnte aufgrund der Positionierung oder Überlauf Probleme mit navbar Behälter durch .navbar-right Klasse verursacht werden.

Standard Bootstrap-Regel:

.navbar-right { 
    margin-right: -15px; 
} 

außer Kraft setzen es mit:

.navbar-right { 
    margin-right: 0; 
} 

Answer 2

Danke Jungs.

Habe ich nur noch einen weißen Raum zum letzten Element Menü  

<li><a href="#/underConstruction"><i class="glyphicon glyphicon-lock"></i> Logout &nbsp; &nbsp; &nbsp;</a></li>