如何让SwiperJS轮播中的Bootstrap 5卡片高度统一？

我不是CSS专家，现在遇到一个问题：SwiperJS滑块里的Bootstrap 5卡片因为内容多少不同，高度不一致，截图如下：

以下是我目前的示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
    />
    <style>
        a {
            text-decoration: none;
        }
    </style>
  </head>
  <body>
    <section id="portfolio" class="mt-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-sm-12 text-center mb-4">
                    <h2>Projects I have completed for my clients</h2>
                </div>

                <div class="col-sm-12 justify-content-center">
                    <div class="swiper myClients animate__animated animate__pulse">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="card mb-5">
                                    <a data-fslightbox href="https://stefan-momcilovic.com/assets/images/tuff.jpg">
                                        <img src="https://stefan-momcilovic.com/assets/images/tuff.jpg" class="card-img-top" alt="Tuffwraps Image" class="swiper-lazy">
                                    </a>
                                    <div class="card-body text-center">
                                        <h5 class="card-title"><a href="https://uk.tuffwraps.com/" class="text-primary" target="_blank" rel="nofollow">Tuffwraps</a></h5>
                                        <p class="card-text">
                                            Built a script that:<br />
                                            1) Scans the products for tags in your Shopify cart <br />
                                            2) If 3 products contain a same tag, the customer will be awarded 20% off <br />
                                            3) Similarly, 4 will get them 25% off, and 5 or more will get them 30% off.
                                        </p>
                                        <a href="https://uk.tuffwraps.com/" class="text-primary" target="_blank" rel="nofollow">Shopify Plus</a>
                                    </div>
                                </div>
                            </div>

                            <div class="swiper-slide">
                                <div class="card mb-5">
                                    <a data-fslightbox href="https://stefan-momcilovic.com/assets/images/travelbass.jpg">
                                        <img src="https://stefan-momcilovic.com/assets/images/travelbass.jpg" class="card-img-top" alt="Travelbass Image" class="swiper-lazy">
                                    </a>
                                    <div class="card-body text-center">
                                        <h5 class="card-title"><a href="https://travelbass.myshopify.com/" class="text-primary" target="_blank" rel="nofollow">Travelbass</a></h5>
                                        <p class="card-text">
                                            Added a cart slider, made it so the page doesn't refresh in case a new item is added into a cart, while updating information about the quantity and price of products.
                                        </p>
                                        <a href="https://travelbass.myshopify.com/" class="text-primary" target="_blank" rel="nofollow">Shopify</a>
                                    </div>
                                </div>
                            </div>

                            <div class="swiper-slide">
                                <div class="card mb-5">
                                    <a data-fslightbox href="https://stefan-momcilovic.com/assets/images/cea.jpg">
                                        <img src="https://stefan-momcilovic.com/assets/images/cea.jpg" class="card-img-top" alt="CEA Image" class="swiper-lazy">
                                    </a>
                                    <div class="card-body text-center">
                                        <h5 class="card-title"><a href="https://www.shop-cea.com/" class="text-primary" target="_blank" rel="nofollow">CEA</a></h5>
                                        <p class="card-text">
                                            Tailored the responsive view for mobile devices.
                                        </p>
                                        <a href="https://www.shop-cea.com/" class="text-primary" target="_blank" rel="nofollow">Shopify</a>
                                    </div>
                                </div>
                            </div>

                            <div class="swiper-slide">
                                <div class="card mb-5">
                                    <a data-fslightbox href="https://stefan-momcilovic.com/assets/images/tcl.jpg">
                                        <img src="https://stefan-momcilovic.com/assets/images/tcl.jpg" class="card-img-top" alt="TCL Image" class="swiper-lazy">
                                    </a>
                                    <div class="card-body text-center">
                                        <h5 class="card-title"><a href="https://www.the-clothinglounge.com/" class="text-primary" target="_blank" rel="nofollow">THE CLOATHING LOUNGE</a></h5>
                                        <p class="card-text">Built a new design look</p>
                                        <a href="https://www.the-clothinglounge.com/" class="text-primary" target="_blank" rel="nofollow">Shopify</a>
                                    </div>
                                </div>
                            </div>

                            <div class="swiper-slide">
                                <div class="card mb-5">
                                    <a data-fslightbox href="https://stefan-momcilovic.com/assets/images/cl.jpg">
                                        <img src="https://stefan-momcilovic.com/assets/images/cl.jpg" class="card-img-top" alt="CL Image" class="swiper-lazy">
                                    </a>
                                    <div class="card-body text-center">
                                        <h5 class="card-title"><a href="https://creativelighters.com/products/the-mystery-subscription" class="text-primary" target="_blank" rel="nofollow">Creative Lighters</a></h5>
                                        <p class="card-text">Fixed a broken monthly subscription for a mystery box product</p>
                                        <a href="https://creativelighters.com/products/the-mystery-subscription" class="text-primary" target="_blank" rel="nofollow">Shopify</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script>
        $(document).ready(function(){
            var myClients = new Swiper(".myClients", {
                slidesPerView: 2,
                spaceBetween: 30,
                autoHeight: true,
                autoplay: {
                    delay: 5000,
                },
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                scrollbar: {
                    el: '.swiper-scrollbar',
                    draggable: true,
                },
                breakpoints: {
                    "@0.00": {
                    slidesPerView: 1,
                    spaceBetween: 10,
                    },
                    "@1.00": {
                        slidesPerView: 2,
                        spaceBetween: 30,
                    },
                }
            });
        });
    </script>
  </body>
</html>

解决办法 #

分两步操作，不需要复杂的CSS知识就能搞定：

1. 关闭Swiper的自动高度功能
   你当前的Swiper配置里写了autoHeight: true，这个属性会让轮播容器跟着当前显示的滑块高度变化，反而导致卡片高度不一致。把它删掉，或者改成autoHeight: false。

2. 添加CSS规则统一卡片高度
   在<style>标签里新增以下样式，让滑块、卡片以及卡片内部的内容区域都能自动撑满高度，保证所有卡片高度一致，同时底部的链接位置也对齐：

   .swiper-slide {
       display: flex;
       height: auto !important; /* 覆盖Swiper默认的滑块高度 */
   }
   .swiper-slide .card {
       height: 100%;
       display: flex;
       flex-direction: column;
   }
   .swiper-slide .card-body {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }
   .swiper-slide .card-text {
       flex: 1;
   }
   

修改后的关键代码示例 #

调整后的Swiper配置：

$(document).ready(function(){
    var myClients = new Swiper(".myClients", {
        slidesPerView: 2,
        spaceBetween: 30,
        // 删掉autoHeight: true，或者设置为false
        autoplay: {
            delay: 5000,
        },
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        scrollbar: {
            el: '.swiper-scrollbar',
            draggable: true,
        },
        breakpoints: {
            "@0.00": {
            slidesPerView: 1,
            spaceBetween: 10,
            },
            "@1.00": {
                slidesPerView: 2,
                spaceBetween: 30,
            },
        }
    });
});

完整的<style>标签内容：

a {
    text-decoration: none;
}
.swiper-slide {
    display: flex;
    height: auto !important;
}
.swiper-slide .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.swiper-slide .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.swiper-slide .card-text {
    flex: 1;
}

这样修改后，所有卡片就会自动统一高度，不管内容多少，底部的链接都会对齐在同一水平线上，轮播容器的高度也会固定为最高卡片的高度。

内容的提问来源于stack exchange，提问作者Stefan Momcilovic