用于下拉菜单的带插入符号的 Glyphicon 扳手

【问题标题】：Glyphicon wrench with caret for dropdown menu用于下拉菜单的带插入符号的 Glyphicon 扳手
【发布时间】：2014-11-18 05:24:26
【问题描述】：

我只是想知道是否有人知道如何创建一个可点击的（插入符号旁边）字形图标（扳手），并有一个不错的下拉菜单可供选择？任何见解都会很棒！

字形扳手的当前代码：

    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
         <span class="glyphicon glyphicon-wrench"></span>
         <b class="caret"></b>
    </a>

                        <ul class="dropdown-menu">
                        <li><a href="http://www.jquery2dotnet.com">Action</a></li>
                        <li><a href="http://www.jquery2dotnet.com">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                        </ul>

当我单击插入符号时，我似乎没有得到下拉菜单。我在这里遗漏了什么明显的东西吗？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 glyphicons

【解决方案1】：

我在这里遗漏了什么明显的东西吗？

您错过了.dropdown 包装器，它为absolutely 定位的下拉菜单建立了一个新的包含块。

因此，下拉菜单现在相对于初始包含块定位。您可以通过具有.dropdown 类的<div> 包装元素，如下所示：

EXAMPLE HERE

<div class="dropdown">
  <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     <span class="glyphicon glyphicon-wrench"></span>
     <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <!-- items here... -->
  </ul>
</div>

¹_{具有非static 值的position 属性建立一个新的包含块。 Twitter Bootstrap 默认将position: relative 应用于.dropdown。}

【讨论】：