Как добавить выпадающую кнопку в элемент группы связанных списков в Bootstrap 3?

Question

Я пытаюсь добавить выпадающую кнопку справа от связанного .list-group-item.Я пробовал следующее, но похоже, что <a class="list-group-item" href="#"> вставляется (Javascript?) И выпадающий не работает.Вот скрипка .Мне нужен тег 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>