具有相同高度卡片的多项目轮播

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>