html - 带插入符号的 Glyphicon Spanner 用于下拉菜单

Question

我只是想知道是否有人知道如何创建一个带有可供选择的漂亮下拉菜单的可点击(插入符号旁边)字形( Spanner )？任何见解都会很棒!

glyphicon Spanner 的当前代码:

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

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

Answer 1

Am I missing something obvious here?

您错过了 .dropdown为 absolute 建立一个新的包含 block 的包装器位置下拉菜单。

因此，下拉菜单现在相对于初始包含 block 定位。您可以用 <div> 包装元素有.dropdown类如下:

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>

---

¹ _{A position值不是 static 的属性建立一个新的包含 block 。 Twitter Bootstrap 适用 position: relative到 .dropdown默认情况下。}