【问题标题】：Bootstrap NavBar Image DropdownBootstrap 导航栏图像下拉菜单
【发布时间】：2015-12-02 06:14:42
【问题描述】：
我正在使用 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>
【问题讨论】：
标签：
angularjs
drop-down-menu
twitter-bootstrap-3
angular-ui-bootstrap
【解决方案1】：
通过删除 span 并将 uib-dropdown 移动到 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>