如何在轮播中对齐卡片 - Bootstrap 5？

Question

我在轮播中有简单的 Bootstrap 5 卡片。当卡片上的文字较少时，卡片上的高度会越来越小，并且旋转木马在滑动时会跳跃。

如何在不使用固定值的情况下将卡片拉伸到与最高卡片相同的高度？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div id="demo" class="carousel slide" data-bs-ride="carousel" style="background-color:powderblue;">
  
  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="container mt-3">
        <h2>Basic Card 1</h2>
        <div class="card">
          <div class="card-body">Basic card</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo 
         eget congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna 
         tempor, a rhoncus libero sollicitudin. Vivamus scelerisque tortor ac elit fringilla 
         cursus. Suspendisse vitae dui sapien. Suspendisse at metus sed lacus faucibus 
         dictum. Nam mollis, ex id viverra fermentum, mauris lectus sodales erat, vitae 
         fringilla risus leo nec magna. Mauris luctus iaculis pretium. Nullam elit mi, 
         laoreet a felis ut, ullamcorper maximus nibh. Donec non dolor eu lectus condimentum 
         consectetur. Vivamus venenatis hendrerit nulla quis vestibulum.</p>
       </div>
     </div>
    </div>
   <div class="carousel-item">
     <div class="container mt-3">
     <h2>Basic Card 2</h2>
     <div class="card">
     <div class="card-body">Basic card</div>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo eget 
     congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna tempor, a 
     rhoncus libero sollicitudin. Vivamus scelerisque tortor ac elit fringilla cursus. 
     Suspendisse vitae dui sapien. Suspendisse at metus sed lacus faucibus dictum. Nam 
     mollis, ex id viverra fermentum, mauris lectus sodales erat, vitae fringilla risus leo 
     nec magna. Mauris luctus iaculis pretium. Nullam elit mi, laoreet a felis ut, 
     ullamcorper maximus nibh. Donec non dolor eu lectus condimentum consectetur. Vivamus 
     venenatis hendrerit nulla quis vestibulum. In rhoncus purus sit amet urna luctus 
     finibus. Nulla varius imperdiet sem, vel lacinia purus elementum id.</p>
  </div>
 </div>
    </div>
    <div class="carousel-item">
      <div class="container mt-3">
  <h2>Basic Card 3</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo eget congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna tempor, a rhoncus libero sollicitudin. .</p>
  </div>
      </div>
    </div>
 </div>
  
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

```

Answer 1

我创建了一些 CSS 来调整 BS5 滑块，使其适用于具有不同高度的幻灯片。

另外，我根据to BS5 docs更新了卡片的结构：

• 卡片标题
• 卡片文字

我知道这只是一个例子，但无论如何，我这样做只是为了更好看。

查看我添加到 CSS 部分的 cmets 了解更多详细信息。

/* updated carousel element to add gaps around cards */
.carousel {
  background-color: powderblue;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* make inner block flex to stretch slides */
.carousel-inner {
  display: flex;
}

/* make flex item to stretch parent container to max child height */
.carousel-item {
  display: flex !important;
  /* animate carousel item opacity property */
  opacity: 0;
  transition: transform .6s ease-in-out, opacity .3s ease-in-out !important;
}

/* animate carousel item opacity property */
.carousel-item.active {
  opacity: 1;
  z-index: 1;
}
.carousel-item-start,
.carousel-item-next {
  opacity: 1;
}
/* end of animating of opacity */

/* added for example purpose (make arrows darker) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: brightness(0);
}

/* adjusting (stretching) slide's card to max height */
.carousel-item .container {
  display: flex;
  flex-direction: column;
}
.carousel-item .card {
  flex-grow: 1;
}
/* end of adjusting */


/* play around this classes to animate it like you want */
/*
.carousel-item-end
.carousel-item-next
.carousel-item-prev
.carousel-item-start
*/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="container mt-3">
        <h2>Basic Card 1</h2>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Basic card</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo eget congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna tempor, a rhoncus libero sollicitudin. Vivamus scelerisque tortor ac elit fringilla
              cursus. Suspendisse vitae dui sapien. Suspendisse at metus sed lacus faucibus dictum. Nam mollis, ex id viverra fermentum, mauris lectus sodales erat, vitae fringilla risus leo nec magna. Mauris luctus iaculis pretium. Nullam elit mi, laoreet
              a felis ut, ullamcorper maximus nibh. Donec non dolor eu lectus condimentum consectetur. Vivamus venenatis hendrerit nulla quis vestibulum.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="container mt-3">
        <h2>Basic Card 2</h2>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Basic card</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo eget congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna tempor, a rhoncus libero sollicitudin. Vivamus scelerisque tortor ac elit fringilla
              cursus. Suspendisse vitae dui sapien. Suspendisse at metus sed lacus faucibus dictum. Nam mollis, ex id viverra fermentum, mauris lectus sodales erat, vitae fringilla risus leo nec magna. Mauris luctus iaculis pretium. Nullam elit mi, laoreet
              a felis ut, ullamcorper maximus nibh. Donec non dolor eu lectus condimentum consectetur. Vivamus venenatis hendrerit nulla quis vestibulum. In rhoncus purus sit amet urna luctus finibus. Nulla varius imperdiet sem, vel lacinia purus elementum
              id.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="container mt-3">
        <h2>Basic Card 3</h2>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Basic card</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo eget congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna tempor, a rhoncus libero sollicitudin. .</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>