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-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>

Bootstrap NavBar图像下拉列表

1 个答案: