展开一张卡片时所有卡片的展开高度

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>