如何在Bootstrap 3中的链表组项中添加下拉按钮？

Question

我正尝试在链接的.list-group-item的右边添加一个下拉按钮。我尝试过以下方法，但看起来好像插入了一个额外的<a class="list-group-item" href="#"> (由Javascript?)下拉列表也不起作用。这是一个fiddle。我需要a标签，所以我不能使用onclick。

<ul class="list-group">
  <a class="list-group-item" href="#">
    some text

    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle pull-right" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>

      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li>
          <a href="#">Action</a>
        </li>
      </ul>
    </div>
  </a>
</ul>

我使用的是Bootstrap 3.3.7。谢谢!

Answer 1

所以我所做的是，在下面的代码片段中，我将链接更改为li，将类更改为btn-group。

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  <ul class="list-group">
    <li class="list-group-item">
      some text
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
     </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

​