Bootstrap NavBar Image Dropdown

Question

Я использую UI Bootstrap 14.3, и я пытаюсь создать изображение в NavBar для выпадающего меню при нажатии.

Я внедрил приведенный ниже код, однако меню появляется вверху страницы и не выровнено под изображением.

Есть ли у кого-нибудь предложения по исправлению и улучшению этого решения?

<span uib-dropdown on-toggle="toggled(open)"> 
     <a href id="simple-dropdown" uib-dropdown-toggle style="padding-top: 0px; padding-bottom: 0px;"> 
     <img src="http://placehold.it/30x30" class="img-rounded" alt="Rounded Image" style="position: relative;top: 10px;float: left; left: -5px;height:100%;"> 
     </a> 
     <ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown" style=""> 
     <li> 
      <a href='/profile'><span class="glyphicon glyphicon-asterisk"></span> Settings</a> 
     </li> 
     </ul> 
    </span> 

Answer 1

Удаляя пролет и перемещая uib-выпадающее меню на элемент li. Он идеально выровнен

  <li uib-dropdown style="padding-left:0px;margin-left:0px;"> 
        <a href id="simple-dropdown" uib-dropdown-toggle class="profile-image dropdown-toggle" style="padding-top: 10px; padding-bottom: 10px;"> 
         <img src="http://placehold.it/30x30" class="img-rounded" alt="Rounded Image" style="heigth:30px;width:30px;margin-left:0px;padding-left:0px;"> 
        </a> 
        <ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown" style=""> 
         <li> 
          <a href='/profile'><span class="glyphicon glyphicon-asterisk"></span> Settings</a> 
         </li> 
         <li> 
          <a href='/sponsored'><span class="fa fa-credit-card"></span> Sponsored</a> 
         </li> 
         <li> 
          <a href='/admin'><span class="fa fa-cubes"></span> Admin Console</a> 
         </li> 
         <li> 
          <a href='/logout'><span class="glyphicon glyphicon-log-out"></span> Logout</a> 
         </li> 
        </ul> 
      </li>