Проблемы с сеткой разборных карт

Question

Отредактировано для обновления: ОК. Я разобрался, как получить стиль разборной карты, которую я хочу. Теперь у меня другая проблема.

Я создал свои карты, но когда я помещаю их в строку из двух столбцов, столбцы начинают каскадно двигаться влево по мере уменьшения списка. Другая проблема заключается в том, что когда я щелкаю по заголовку карточки, чтобы ее развернуть, контур карточки рядом с ней также раскрывается, даже если текст остается скрытым до тех пор, пока не будет нажата / не свернута. Я хочу, чтобы была только карта, на которую я нажимаю , чтобы ее контур не разворачивался вместе с текстовым содержимым, в то время как карта рядом с ней остается просто сплошным заголовком, даже когда карты под ней перемещаются. вниз, чтобы освободить место для не свернутой карты выше. Я отредактирую свой исходный код для нового кода.

Оригинальный вопрос: я пытаюсь изучить Bootstrap, и одна из вещей, которые я пытаюсь сделать, - это создать сетку складных карт, гдеЗаголовок ENTIRE кликабелен, и все карты начинают сворачиваться.

Мне просто нужен базовый стиль карты с согласованным цветом сплошным заголовком и контуром и прозрачным внутренним фоном содержимого.

Вот как выглядит мой неудачный кодна сайте с песочницей, над которым я работаю:

Вот код Iиметь:

.acards {
  margin: 0 10px 10px 0;
  min-width: 550px;
  overflow: hidden;
}

.acards a {
  color: WHITE;
  text-decoration: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="card card-outline-danger acards">
    <a href="#demo" data-toggle="collapse" data-target="#demo" class="card-inverse card-danger card-header">demo Animation</a>
    <div id="demo" class="collapse">
      <div class="animated infinite demo"><br><br>demo</div>
      <div class="card">
        <u>How to use this code </u><br>
        <code style="background:TRANSPARENT; color:white">
            Use a SPAN tag for inline demoes.<br>
            &lt;span class="animated infinite demo"&gt;YOUR demoING CONTENT HERE&lt;/span&gt;<br><br>

            Use a DIV for block-level demoes.<br>
            &lt;div class="animated infinite demo"&gt;YOUR demoING CONTENT HERE&lt;/div&gt;
        </code>
      </div>
    </div>
  </div>

  <div class="card card-outline-danger acards">
    <a href="#demo" data-toggle="collapse" data-target="#demo" class="card-inverse card-danger card-header">demo Animation</a>
    <div id="demo" class="collapse">
      <div class="animated infinite demo"><br><br>demo</div>
      <div class="card">
        <u>How to use this code </u><br>
        <code style="background:TRANSPARENT; color:white">
            Use a SPAN tag for inline demoes.<br>
            &lt;span class="animated infinite demo"&gt;YOUR demoING CONTENT HERE&lt;/span&gt;<br><br>

            Use a DIV for block-level demoes.<br>
            &lt;div class="animated infinite demo"&gt;YOUR demoING CONTENT HERE&lt;/div&gt;
        </code>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="card card-outline-danger acards">
    <a href="#demo" data-toggle="collapse" data-target="#demo" class="card-inverse card-danger card-header">demo Animation</a>
    <div id="demo" class="collapse">
      <div class="animated infinite demo"><br><br>demo</div>
      <div class="card">
        <u>How to use this code </u><br>
        <code style="background:TRANSPARENT; color:white">
            Use a SPAN tag for inline demoes.<br>
            &lt;span class="animated infinite demo"&gt;YOUR demoING CONTENT HERE&lt;/span&gt;<br><br>

            Use a DIV for block-level demoes.<br>
            &lt;div class="animated infinite demo"&gt;YOUR demoING CONTENT HERE&lt;/div&gt;
        </code>
      </div>
    </div>
  </div>

  <div class="card card-outline-danger acards">
    <a href="#demo" data-toggle="collapse" data-target="#demo" class="card-inverse card-danger card-header">demo Animation</a>
    <div id="demo" class="collapse">
      <div class="animated infinite demo"><br><br>demo</div>
      <div class="card">
        <u>How to use this code </u><br>
        <code style="background:TRANSPARENT; color:white">
            Use a SPAN tag for inline demos.<br>
            &lt;span class="animated infinite demo"&gt;YOUR demoING CONTENT HERE&lt;/span&gt;<br><br>

            Use a DIV for block-level demos.<br>
            &lt;div class="animated infinite demo"&gt;YOUR demoING CONTENT HERE&lt;/div&gt;
        </code>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>