ブートストラップでNavbarの幅を拡張する

Question

ブートストラップでnavbar-rightを拡張する際に問題があります。私はそれにすべての要素を合わせる必要があります。ここで何が起こっているのである：

私はプロフィール画像と個別に表示するためのユーザ名を取得することはできません。私は "クリア：両方"と普通のものを試しました。 ULのサイズを拡張すると、親DIVが破られます。 LIのサイズを拡張しようとすると、何もしません。ここに私のコードです：

<!-- 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 --> 

誰でも助けてくれますか？

Answer 1

は<nav>後<div class="container-fluid">を追加して、余裕を持った名前と写真の配置を調整します。

<!-- 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; 
} 

私はそれがあなたの役に立てば幸い:)

この

チェックデモhere

HTMLを試してみてください