Увеличение высоты всех карточек в ряду при раскрытии одной

Question

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mr-0 ml-0">
  <div class="card" style="width: 18rem;">
    <div class="card-header">
      1
    </div>
    <div class="card-body">
      <h5 class="card-title">First card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
      <h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
    </div>
    <div class="collapse" id="collapseExample1">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">t1</li>
        <li class="list-group-item">t2</li>
        <li class="list-group-item">t3</li>
        <li class="list-group-item">t4</li>
      </ul>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Price</li>
    </ul>
  </div>
  <div class="card" style="width: 18rem;">
    <div class="card-header">
      2
    </div>
    <div class="card-body">
      <h5 class="card-title">Second card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
      <h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
    </div>
    <div class="collapse" id="collapseExample2">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">t1</li>
        <li class="list-group-item">t2</li>
        <li class="list-group-item">t3</li>
        <li class="list-group-item">t4</li>
      </ul>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Price</li>
    </ul>
  </div>
</div>

Answer 1

Вы можете добавить этот класс align-items-start к <div class="row mr-0 ml-0">. Это предотвратит увеличение высоты всех карт при расширении одной.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row align-items-start mr-0 ml-0">
  <div class="card" style="width: 18rem;">
    <div class="card-header">
      1
    </div>
    <div class="card-body">
      <h5 class="card-title">First card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
      <h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
    </div>
    <div class="collapse" id="collapseExample1">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">t1</li>
        <li class="list-group-item">t2</li>
        <li class="list-group-item">t3</li>
        <li class="list-group-item">t4</li>
      </ul>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Price</li>
    </ul>
  </div>
  <div class="card" style="width: 18rem;">
    <div class="card-header">
      2
    </div>
    <div class="card-body">
      <h5 class="card-title">Second card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
      <h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
    </div>
    <div class="collapse" id="collapseExample2">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">t1</li>
        <li class="list-group-item">t2</li>
        <li class="list-group-item">t3</li>
        <li class="list-group-item">t4</li>
      </ul>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Price</li>
    </ul>
  </div>
</div>