如何在輪播中對齊卡片 - 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 slider 以使其與具有不同高度的幻燈片一起使用。

另外，我根據BS5 文檔更新了卡片的結構：

• 卡片標題
• 卡片文字

我知道這只是示例，但無論如何，我這樣做只是為了更好看。

查看我添加到 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>