CSS navbar画像の問題

Question

私はnavbarでいくつかのテストをしていました。ユーザー名の直前にイメージを置くとき、この問題が起こりました。私は実際に何が問題なのかわからない、私は通常、サーバー側のスクリプトを行うが、これらの設計はしない。このアクティブなクラスのドロップダウンメニューは、計画どおりに画像と一緒に表示する必要がありましたが、実際は半分にしかなりません。誰かが私にCSSファイルを置くことができるものの例を私に与えることができれば、問題があるからです。 Here is the image

.navbar-image { 
    width: 32px; 
    height: 32px; 
    position: absolute; 
    top: 10px; 
    left: -19px; 
    border-radius: 50%; 
} 

.nav-img { 
    position: relative; 
    padding-left: 50px; 
} 

    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle nav-img" data-toggle="dropdown" role="button" aria-expanded="false"> 
      <img src="/uploads/avatars/{{ Auth::user()->avatar }}" class='navbar-image'> 
      {{ Auth::user()->name }} <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
     <li><a href="/posts"><i class='fa fa-btn fa-sticky-note'></i>Posts</a></li> 
     <li><a href="/profile"><i class='fa fa-btn fa-user'></i>Profile</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Log out</a></li> 
     </ul> 
    </li> 

Answer 1

ここ

.dropdown, .dropdown-toggle, .dropdown-menu { 
    display: inline-block; 
} 

.dropdown-toggle, .dropdown-menu { 
    float: right; 
} 

.navbar-image { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
} 

Answer 2

を試してみてください、あなたのメニュー画像の修正です：

.dropdown { position: relative; } 
.navbar-image { 
    position: absolute; 
    width: 32px; 
    height: 32px; 
    top: 10px; /*** Set value as per your required ***/ 
    right: 10px; /*** Set value as per your required ***/ 
    border-radius: 50%; 
} 

Answer 3

は、このコードを試してみてください。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.navbar-image { 
 
    width: 32px; 
 
    height: 32px; 
 
    border-radius: 50%; 
 
    margin-right: 5px; 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> 
 
      <img src="//placehold.it/80x80/?text=%20" class='navbar-image'> 
 
      User Name <span class="caret"></span> 
 
     </a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="/posts"><i class='fa fa-btn fa-sticky-note'></i>Posts</a></li> 
 
      <li><a href="/profile"><i class='fa fa-btn fa-user'></i>Profile</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#"><i class="fa fa-btn fa-sign-out"></i>Log out</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>