Bootstrap Carousel 相同高度的项目

Question

我使用的是通用引导轮播，但每张幻灯片包含 2 列。我正在尝试使旋转木马幻灯片都具有相同的高度。因此，如果一张幻灯片的内容更多，则其他幻灯片会调整到此高度：

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="5000">
      <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 align-self-center">
                test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
            </div>
            <div class="col-xl-4">
                test
            </div>
        </div>
      </div>
    </div>
    
    <div class="carousel-item white" data-bs-interval="5000">
      <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 align-self-center">
                test
            </div>
            <div class="col-xl-6">
                test
            </div>
        </div>
      </div>
    </div>
    

  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  
</div>

我尝试了以下 jQuery 代码，但在移动设备上检查时似乎不起作用：

<script>
function carouselNormalization() {
  var items = $('#carouselExampleInterval .item'),
    heights = [],
    tallest;

  if (items.length) {
    function normalizeHeights() {
      items.each(function() { 
        heights.push($(this).height());
      });
      tallest = Math.max.apply(null, heights); 
      items.each(function() {
        $(this).css('min-height', tallest + 'px');
      });
    };
    normalizeHeights();

    $(window).on('resize orientationchange', function() {
      tallest = 0, heights.length = 0; 
      items.each(function() {
        $(this).css('min-height', '0');
      });
      normalizeHeights();
    });
  }
}
window.onload = function() {
  carouselNormalization();
}
</script>

Answer 1

如果您使用以下引导程序，您的容器会将所有轮播项目缩放到内容最多的项目的高度。

Bootstrap 4 h-100 类用于 height:100% 和 container-fluid 以扩展视口；

<div class="container-fluid h-100">

替换

<div class ="container">

带有更改和示例的完整 html：

<section style="background:#f7f7f7;" class="py-5">

<div class="container-fluid h-100">
  <div class="row">
    <div class="col-md-8 mx-auto">
<div id="carouselExampleFade" class="carousel slide carousel-fade parab" data-ride="carousel">
  
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleFade" data-slide-to="1"></li>
    <li data-target="#carouselExampleFade" data-slide-to="2"></li>
  </ol>
  
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h3>Sunil Radhakrishnan<br><small>Bengaluru</small></h3>
      <p>Working with Mahadevan is just what I needed to get reignited and fired up about my career which was just prodding. I am so grateful!</p>
    </div>
    <div class="carousel-item">
      <p>asdasd</p> <p>asdasd</p>
    </div>
    <div class="carousel-item">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non gravida turpis. Praesent consequat lacus eu ipsum pellentesque, et eleifend arcu bibendum. Donec vel leo in ex volutpat dapibus. Praesent eget lectus pulvinar, porta arcu quis, volutpat nulla. Vestibulum id tellus sit amet ligula egestas faucibus eget et erat. Aliquam placerat, quam vel fringilla rutrum, dui justo dictum mauris, at egestas risus eros vel ligula. Fusce sagittis convallis velit at ornare. Integer maximus, nulla sit amet cursus efficitur, nibh sem euismod elit, eget euismod mauris eros in mauris. Aliquam bibendum bibendum urna eu auctor.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non gravida turpis. Praesent consequat lacus eu ipsum pellentesque, et eleifend arcu bibendum. Donec vel leo in ex volutpat dapibus. Praesent eget lectus pulvinar, porta arcu quis, volutpat nulla. Vestibulum id tellus sit amet ligula egestas faucibus eget et erat. Aliquam placerat, quam vel fringilla rutrum, dui justo dictum mauris, at egestas risus eros vel ligula. Fusce sagittis convallis velit at ornare. Integer maximus, nulla sit amet cursus efficitur, nibh sem euismod elit, eget euismod mauris eros in mauris. Aliquam bibendum bibendum urna eu auctor.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non gravida turpis. Praesent consequat lacus eu ipsum pellentesque, et eleifend arcu bibendum. Donec vel leo in ex volutpat dapibus. Praesent eget lectus pulvinar, porta arcu quis, volutpat nulla. Vestibulum id tellus sit amet ligula egestas faucibus eget et erat. Aliquam placerat, quam vel fringilla rutrum, dui justo dictum mauris, at egestas risus eros vel ligula. Fusce sagittis convallis velit at ornare. Integer maximus, nulla sit amet cursus efficitur, nibh sem euismod elit, eget euismod mauris eros in mauris. Aliquam bibendum bibendum urna eu auctor.</p>
    </div>
  </div>
  
  
</div>
      
    </div>
  </div>
</div>
  
</section>

工作示例：https://jsfiddle.net/0ytL5g1s/2/

更新#2： 使用 flex 的 2 列工作示例：https://jsfiddle.net/a3dk8th4/