Question

我正在尝试构建一个列表组，列表中的每个项目都有一个触发下拉菜单的图标。我有一些问题如何定位下拉列表，根本不会看到glyphicon，除非我在按钮中放置文本，然后它的位置不好。

此外，我想用javascript动态构建和定位下拉列表，但首先我需要看到一个位置正确，然后我将完成所有JS DOM工作..
谢谢你的帮助！

的jsfiddle： https://jsfiddle.net/DTcHh/24900/

一些代码：

<div class="container">
<div class="col-sm-4">
<ul class="list-group">
            <li class="list-group-item">
              <a href="#">option</a>
            <div class="dropdown">
                  <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i>ICON</button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                  </ul>
                </div></li>
                        <li class="list-group-item">
              <a href="#">option</a>
            <div class="dropdown">
                  <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                  </ul>
                </div></li>
          </ul>

</div> <!--.col-sm-4 -->          
<div class="col-sm-8">

</div>
          </div>

Answer 1

我已将bootstrap css的版本更新为包含glyphicons的cdn版本。然后，我将锚元素移动到图标旁边，我认为这是您正在寻找的图标。我还删除了导致布局问题的自定义css。

<div class="dropdown">
    <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <i class="glyphicon glyphicon-option-vertical"></i>
        <a href="#">option</a>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
    </ul>
</div>

https://jsfiddle.net/DTcHh/24902/

列表组中的bootstrap动态下拉列表

1 个答案: