如何通过bootstrap在旋转木马中设置等高？

Question

怎样才能使列的高度相等？我知道bootstrap有'equal‘属性，它能在carousel中实现吗？或者我应该在css中通过rem设置一个高度？这是我的旋转木马：

 <div id="myCarousel2" class="carousel py-3 py-md-4 slide" data-type="multi" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="item carousel-item active">
                                <div class="row equal">
                                    <div class="col-md-8 d-flex offset-2">
                                        <div class="single-box px-5">
                      
                                            <div class="white mt-0 my-5 pt-sm-0 pr-2">Some text about stuff.jnmla;sxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item carousel-item">
                                <div class="row equal">
                                    <div class="col-md-8 d-flex offset-2">
                                        <div class="single-box px-5">
                                            <div class="white mt-0 my-5">Another topic
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>                        
                        <a class="carousel-control left angle-left carousel-control-prev" href="#myCarousel2" data-slide="prev">
                            <img src='images/left.png' >
                        </a>
                        <a class="carousel-control right angle-right carousel-control-next" href="#myCarousel2" data-slide="next">
                            <img src='images/right.png' >
                        </a>
                    </div>

我真的不想在css中设置高度，因为列中的文本可能会被更改，因此它不适合列

Answer 1

因为幻灯片在不显示时会切换到display: none，所以我不认为有一种方法可以使用flex来平衡高度。最简单的方法是使用JavaScript (jQuery，因为它在那里)来测试每个幻灯片，然后设置所有幻灯片的高度以匹配最高的幻灯片。

我确实向列添加了flex以使列内容垂直居中。

​

function normalizeSlideHeights() {
    $('.carousel').each(function() {
        var items = $('.carousel-item', this);
        // reset the height
        items.css('height', 'auto');
        // set the height
        var maxHeight = Math.max.apply(null,
            items.map(function() {
                return $(this).outerHeight()
            }).get());
        items.css('height', maxHeight + 'px');
    })
}

$(window).on(
    'load resize orientationchange',
    normalizeSlideHeights
);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<div id="myCarousel2" class="carousel py-3 py-md-4 slide" data-type="multi" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item carousel-item active border">
            <div class="row h-100">
                <div class="col-8 offset-2 border d-flex flex-column justify-content-center">
                    <div class="single-box px-5">
                        <div class="white mt-0 my-5 pt-sm-0 pr-2">Some text about stuff Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste ut quia corrupti! Similique quae corrupti quos doloribus aliquam soluta est, pariatur quibusdam quas odio dolorum tempora nisi autem voluptatum voluptatibus.</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item carousel-item border">
            <div class="row h-100">
                <div class="col-8 offset-2 border d-flex flex-column justify-content-center">
                    <div class="single-box px-5">
                        <div class="white mt-0 my-5">Another topic
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="carousel-control left angle-left carousel-control-prev" href="#myCarousel2" data-slide="prev">
        <img src='images/left.png'>
    </a>
    <a class="carousel-control right angle-right carousel-control-next" href="#myCarousel2" data-slide="next">
        <img src='images/right.png'>
    </a>
</div>

​