引导程序导航栏图像下拉菜单

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

通过删除span并将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>