具有相同高度卡的多项目轮播[重复]

【问题标题】：Multi item carousel with same height cards [duplicate]具有相同高度卡的多项目轮播[重复]
【发布时间】：2021-12-30 09:37:49
【问题描述】：

预期行为：所有卡片的高度相同

（所有卡片都应将其高度调整到最高的卡片）


实际行为：高度取决于文本长度

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

IMAGE THAT NOT EACH SLIDE IS SAME HEIGHT

【问题讨论】：

  • 你能在这里分享代码吗？
  • @MohitMaroliyaB17CS036 你可以在我发的sn-p里试试，需要用到mdb-bootstrap
  • 打不开
  • @MohitMaroliyaB17CS036 我的错，更新了链接。
  • @GlebKemarsky 请不要从场外位置转录实质性代码，除非场外位置通过其许可明确允许这样做。否则，这是 OP 的责任/特权。

标签： javascript twitter-bootstrap bootstrap-4 mdbootstrap


【解决方案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>

【讨论】：

  • 我希望它能够响应......不要给它min-height:300px 。可能文字卡片大于300px;
  • 然后将px更改为%并根据需要选择值。喜欢90%。您也可以根据需要更改卡片的高度。
  • 是否有可能总是让它和最大的卡片一样大？
  • 将所有卡片的高度设为最大卡片的高度
  • 我该如何编码？
【解决方案2】：

注意：在 sn-ps 中，我使用sm 断点使结果在没有全屏模式的情况下可见。 MDB 和 CodePen 沙箱中的代码使用原始的 md 断点。

步骤 1. 调整一张幻灯片上卡片的高度

  1. 将嵌套块 .card 和 .card-body 转换为具有列方向的弹性框。
  2. 将flex-grow: 1; 属性添加到.card-body 块中，使其占据所有可用高度。
  3. 将相同的属性分配给.card-text 块，使其将按钮按到卡片的底部边缘，从而对齐它们。

我更喜欢使用 CSS 来实现这一点，这样我就不必为所有涉及的块重复相同的实用程序类。但是对于.col-... 块，我使用了utility classes .d-flex、.d-none 和.d-sm-flex，因为它们在这里扮演了另外一个角色：它们还根据屏幕宽度改变卡片的可见性。

我还删除了 .clearfix 类，因为它创建了额外的伪元素，我认为没有理由使用这个。

.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. 如果浏览器窗口调整大小，请更新这些值。
  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>

【讨论】：

    猜你喜欢
    • 2014-02-09
    • 1970-01-01
    • 1970-01-01
    • 2019-04-13
    • 2017-03-16
    • 2017-03-19
    • 2018-04-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode