CSS navbar image issue

Question

Я просто делал некоторые тесты с помощью своего навигатора, и когда я хотел поставить изображение прямо перед именем пользователя, это произошло. Я действительно не знаю, в чем проблема, обычно я использую серверные скрипты, но не этот дизайн. Этот активный класс в выпадающем меню, как и планировалось, должен был быть вместе с изображением, но на самом деле это всего лишь половина. Если кто-то может дать мне пример того, что я могу наложить на свой 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>