Question

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

当前的glyphicon扳手代码：

    <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

我错过了一些明显的东西吗？

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

因此，下拉菜单现在相对于初始包含块定位。您可以使用<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>

¹ _{position属性的值不是static，它会建立一个新的包含块。默认情况下，Twitter Bootstrap将position: relative应用于.dropdown。}

Glyphicon扳手与下拉菜单的插入符号

1 个答案: