如何对齐轮播中的卡片 - 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:

更新了卡片的结构

card-title
card-text

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

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

/* 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>

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

How to align cards in carousel - Bootstrap 5?

html

css

sass

carousel

bootstrap-5