具有相同高度卡片的多項目輪播

Question

預期行為：所有卡片的高度相同。
所有卡片都應將其高度調整為最高的卡片。

實際行為：高度取決於文本長度。
所以每張幻燈片都有自己的高度。

MDB 片段： https://mdbootstrap.com/snippets/jquery/temp/3565823

不帶 MDB Pro styles 和腳本的片段：

 <div class="container my-4"> <.--Carousel Wrapper--> <div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel"> <.--Controls--> <div class="controls-top"> <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a> <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a> </div> <:--/.Controls--> <.--Indicators--> <ol class="carousel-indicators"> <li data-target="#multi-item-example" data-slide-to="0" class="active"></li> <li data-target="#multi-item-example" data-slide-to="1"></li> <li data-target="#multi-item-example" data-slide-to="2"></li> </ol> <.--/.Indicators--> <.--Slides--> <div class="carousel-inner" role="listbox"> <:--First slide--> <div class="carousel-item active"> <div class="row"> <div class="col-md-4"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content:Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18):jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35):jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> </div> <.--/.First slide--> <.--Second slide--> <div class="carousel-item"> <div class="row"> <div class="col-md-4"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap:com/img/Photos/Horizontal/City/4-col/img%20(47).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap:com/img/Photos/Horizontal/City/4-col/img%20(48).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> </div> <.--/.Second slide--> <.--Third slide--> <div class="carousel-item"> <div class="row"> <div class="col-md-4"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45):jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51):jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> </div> <.--/.Third slide--> </div> <.--/.Slides--> </div> <.--/:Carousel Wrapper--> </div> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

Answer 1

將style="min-height:300px"添加到每個卡片文本

請使用此代碼：

<div class="container my-4">

  <p class="font-weight-bold">Bootstrap carousel multiple items is an improved version of the standard bootstrap
    carousel which allows you to put inside more than one element.</p>

  <p><strong>Detailed documentation and more examples of Bootstrap grid you can find in our <a href="https://mdbootstrap.com/docs/standard/components/carousel/"
                                                                                               target="_blank">Bootstrap Carousel Docs</a>.</p>

  <p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a> or <a target="_blank" href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2904002"><strong>multi-item carousel example for the newest Bootstrap 5</strong></a>.</p>

  <hr class="mt-5">

  <p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>

  <a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fa fa-download"></i></a>
  <a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
  <a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
  <a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fa fa-github ms-2"></i></a>

  <hr class="mb-5"/>

  <!--Carousel Wrapper-->
  <div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">

    <!--Controls-->
    <div class="controls-top">
      <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
      <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
    </div>
    <!--/.Controls-->

    <!--Indicators-->
    <ol class="carousel-indicators">
      <li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
      <li data-target="#multi-item-example" data-slide-to="1"></li>
      <li data-target="#multi-item-example" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->

    <!--Slides-->
    <div class="carousel-inner" role="listbox">

      <!--First slide-->
      <div class="carousel-item active">

        <div class="row">
          <div class="col-md-4">
            <div class="card mb-2">
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg"
                   alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
                  card's content.Some quick example text to build on the card title and make up the bulk of the
                  card's content.Some quick example text to build on the card title and make up the bulk of the
                  card's content.</p>
                <a class="btn btn-primary">Button</a>
              </div>
            </div>
          </div>

          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="card mb-2">
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                   alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
                  card's content.</p>
                <a class="btn btn-primary">Button</a>
              </div>
            </div>
          </div>

          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="card mb-2">
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"
                   alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
                  card's content.</p>
                <a class="btn btn-primary">Button</a>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!--/.First slide-->

      <!--Second slide-->
      <div class="carousel-item">

        <div class="row">
          <div class="col-md-4">
            <div class="card mb-2">
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg"
                   alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
                  card's content.</p>
                <a class="btn btn-primary">Button</a>
              </div>
            </div>
          </div>

          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="card mb-2">
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg"
                   alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
                  card's content.Some quick example text to build on the card title and make up the bulk of the
                  card's content.</p>
                <a class="btn btn-primary">Button</a>
              </div>
            </div>
          </div>

          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="card mb-2">
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg"
                   alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
                  card's content.</p>
                <a class="btn btn-primary">Button</a>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!--/.Second slide-->

      <!--Third slide-->
      <div class="carousel-item">

        <div class="row">
          <div class="col-md-4">
            <div class="card mb-2">
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg"
                   alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
                  card's content.Some quick example text to build on the card title and make up the bulk of the
                  card's content.</p>
                <a class="btn btn-primary">Button</a>
              </div>
            </div>
          </div>

          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="card mb-2">
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg"
                   alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
                  card's content.Some quick example text to build on the card title and make up the bulk of the
                  card's content.Some quick example text to build on the card title and make up the bulk of the
                  card's content.</p>
                <a class="btn btn-primary">Button</a>
              </div>
            </div>
          </div>

          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="card mb-2">
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg"
                   alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
                  card's content.</p>
                <a class="btn btn-primary">Button</a>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!--/.Third slide-->

    </div>
    <!--/.Slides-->

  </div>
  <!--/.Carousel Wrapper-->


</div>

Answer 2

注意：在片段中，我使用sm斷點使結果在沒有全屏模式的情況下可見。 MDB和CodePen沙箱中的代碼使用原始md斷點。

步驟 1. 調整一張幻燈片上卡片的高度

1. 將嵌套塊.card和.card-body變成具有列方向的彈性盒。
2. 添加flex-grow: 1; .card-body塊的屬性，使其占據所有可用高度。
3. 將相同的屬性分配給.card-text塊，使其將按鈕按到卡片的底部邊緣，從而對齊它們。

我更喜歡使用 CSS 來實現這一點，這樣我就不必為所有涉及的塊重復相同的實用程序類。 但是對於.col-...塊，我使用了實用程序類.d-flex 、 .d-none和.d-sm-flex ，因為它們在這里扮演了另外一個角色：它們還根據屏幕寬度。

我還刪除了.clearfix class 因為它創建了額外的偽元素，我認為沒有理由使用這個聽。

 .carousel-equal-heights.carousel-item.card, .carousel-equal-heights.carousel-item.card-body { display: flex; flex-direction: column; }.carousel-equal-heights.carousel-item.card-body, .carousel-equal-heights.carousel-item.card-text { flex-grow: 1; }

 <div class="container my-4"> <div class="carousel-equal-heights"> <div class="carousel-item active"> <:--Content of a slide--> <div class="row"> <div class="col-sm-4 d-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content: </p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-sm-4 d-none d-sm-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content:</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-sm-4 d-none d-sm-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content:</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> </div> </div> </div> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

步驟 2. 調整幻燈片的高度

不幸的是，這種方法不適用於幻燈片。 非活動幻燈片得到display: none; 屬性和.carousel-inner容器始終更改其高度以匹配活動幻燈片的高度。

在這種情況下我們可以使用 JS：

1. 計算最高點的高度並將其設置為所有輪播幻燈片。
2. 如果瀏覽器 window 調整大小，則更新這些值。
3. 還要加上height: 100%; 屬性到每張幻燈片上的.row塊。

檢查MDB和CodePen上的解決方案。

 $(document).ready(function() { let $carouselItems = $('.carousel-equal-heights').find('.carousel-item'); updateItemsHeight(); $(window).resize(updateItemsHeight); function updateItemsHeight() { // remove old value $carouselItems.height('auto'); // calculate new one let maxHeight = 0; $carouselItems.each(function() { maxHeight = Math.max(maxHeight, $(this).outerHeight()); }); // set new value $carouselItems.each(function() { $(this).outerHeight(maxHeight); }); // debug it console.log('new items height', maxHeight); } });

 .carousel-equal-heights.carousel-item >.row { height: 100%; }.carousel-equal-heights.carousel-item.card, .carousel-equal-heights.carousel-item.card-body { display: flex; flex-direction: column; }.carousel-equal-heights.carousel-item.card-body, .carousel-equal-heights.carousel-item.card-text { flex-grow: 1; }

 <div class="container my-4"> <.--Carousel Wrapper--> <div id="multi-item-example" class="carousel slide carousel-multi-item carousel-equal-heights" data-ride="carousel"> <:--Controls--> <div class="controls-top"> <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a> <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a> </div> <.--/.Controls--> <.--Slides--> <div class="carousel-inner" role="listbox"> <.--First slide--> <div class="carousel-item active"> <div class="row"> <div class="col-sm-4 d-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap:com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content: </p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-sm-4 d-none d-sm-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-sm-4 d-none d-sm-flex"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> </div> <:--/.First slide--> <.--Second slide--> <div class="carousel-item"> <div class="row"> <div class="col-sm-4 d-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60):jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-sm-4 d-none d-sm-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content: Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-sm-4 d-none d-sm-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content:</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> </div> <.--/.Second slide--> <.--Third slide--> <div class="carousel-item"> <div class="row"> <div class="col-sm-4 d-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53):jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-sm-4 d-none d-sm-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content: Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-sm-4 d-none d-sm-flex"> <div class="card mb-2"> <img class="card-img-top" src="https.//mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> </div> <:--/.Third slide--> </div> <.--/.Slides--> </div> <.--/.Carousel Wrapper--> </div> <link rel="stylesheet" href="https.//cdn:jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare:com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>