Помещение кнопки внутри коллапсирующей карты в Bootstrap

Question

Я пытаюсь положить кнопку в коллапс (часть аккордеона), которая будет go на новой странице при нажатии. Но сейчас, когда я пытаюсь нажать на кнопку, она просто закрывает коллапс.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div id="accordion">
  <div class="card">
    <div class="card-header p-1">
      <a class="card-link stretched-link text-body" data-toggle="collapse" href="#collapseOne">
        <div class="row no-gutters">
          <div class="col-8 pl-1"><strong>Title </strong></div>
                    <div class="col-4 text-right"><span class="badge badge-danger p-1">High Priority</span></div>
                </div>
                <div class="row no-gutters">
                    <div class="col text-center">
                    <!-- Lock this to prevent word wrap from too mane names -->
                    <span class="badge badge-pill badge-primary mr-1">Name</span><span class="badge badge-pill badge-primary mr-1">Name</span><span class="badge badge-pill badge-warning mr-1">Name</span>
                    </div>
                </div>
            </a>
        </div>
        <div id="collapseOne" class="collapse" data-parent="#accordion">
            <div class="card-body p-1">
            <div class="row no-gutters">
                <div class="col-9">

                    <div class="row  m-0 p-0 ">
                        <div class="col-sm">
                            <div class="row">
                                <div class="col text-center">
                                    <small><strong>Start:</small></strong><br>30 May 08:00
          </div>
          <div class="col text-center">
            <small><strong>Late/Expire:</small></strong><br>30 Jun 16:00
          </div>
        </div>
    </div>
    <div class="col-sm">
      <div class="row">
        <div class="col text-center">
          <small><strong>Category</small></strong><br>Catering
        </div>
        <div class="col text-center">
          <small><strong>Reward:</small></strong><br>300
        </div>
      </div>
    </div>
  </div>


</div>
<!-- Here is the button I can't seem to click -->
<div class="col-3 p-1 align-self-center"><a href="active_chore.php?todo_id=242" class="btn btn-info" role="button"><strong>View Chore</strong></a></div>
</div>
</div>
</div>
</div>

Как ни странно, когда я помещаю сниппет и запускаю его при переполнении стека, он работает нормально. Но когда я запускаю его в своем браузере, нажатие в любом месте тела карты скрывает элемент свертывания.

Спасибо за помощь, Сет

Answer 1

Неважно, я нашел это. «Растянутая ссылка» в заголовке карты делает всю карту, включая тело, растянутой ссылкой. По какой-то причине фрагмент переполнения стека этого не делает, а браузер Chrome.