Breite der Navbar-rechts im Bootstrap erweitern

Question

Ich habe Probleme beim Erweitern der Navbar-rechts im Bootstrap. Ich brauche es, um alle Elemente darin zu integrieren. Hier ist was los:

ich nicht das Profilbild erhalten und den Benutzernamen separat angezeigt werden soll. Ich habe "clear: both" und das normale Zeug ausprobiert. Wenn ich die Größe des UL erweitere, bricht es den Elternteil DIV. Wenn ich versuche, die Größe des LI zu vergrößern, tut es nichts. Hier ist mein Code:

<!-- Fixed navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <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" href="#"><img src="images/logo.png" class="logo"> <span class="site-title">Privy Personal</span></a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Files</a></li> 
      <li class="active"><a href="#">Sharing</a></li> 
      <li><a href="#contact">Recent</a></li> 
       <li><a href="#">Deleted</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#"><img src="images/Search.svg"> </a></li> 
      <li><a href="#"><img src="images/Notification.svg"> </a></li> 
      <li><a href="#"><span class="username">Tony Stark</span><img src="http://placehold.it/25x25" class="profile"></a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
    </nav> <!-- End Fixed Nav --> 

Kann mir jemand helfen?

Answer 1

Fügen Sie <div class="container-fluid"> nach <nav> hinzu und passen Sie die Ausrichtung von Name und Bild an den Rand an.

Versuchen Sie, diese

Check Demo here

HTML:

<!-- Fixed navbar --> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <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" href="#"><span class="site-title">Privy Personal</span></a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Files</a></li> 
     <li class="active"><a href="#">Sharing</a></li> 
     <li><a href="#contact">Recent</a></li> 
     <li><a href="#">Deleted</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><i class="fa fa-user"></i> </a></li> 
     <li><a href="#"><i class="fa fa-user"></i> </a></li> 
     <li><a href="#"><span class="username">Tony Stark</span><img src="http://placehold.it/25x25" class="profile img-circle"></a></li> 
     </ul> 
    </div> 
    <!--/.nav-collapse --> 
    </div> 
</nav> 
<!-- End Fixed Nav --> 

CSS:

.username { 
    margin-right: 5px; 
} 

.profile { 
    margin-top: -7px; 
} 

Ich hoffe, dass es Ihnen hilft :)