Bootstrap 4 Carousel：如何堆叠容器项目而不是内联

Question

想要垂直堆叠每张幻灯片（一个 h2 和按钮）的内容，而不是 Bootstrap 4 Carousel 的默认内联格式。我的代码如下：

<div id="slider" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active" style="background-image: url({{ 'placeholder1.jpg' | asset_url }})">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h2>Great food without the price</h2>
                <button class="btn btn-primary btn-lg">Order now</button>
            </div>
        </div>
        ...
    </div>
</div>

Current default format

Desired format

这是我第一次使用版本 4，所以对使用 d-flex 等有点新鲜。任何帮助将不胜感激:)

Answer 1

您需要将.flex-column 添加到您的.d-flex div。但是还需要在<h2>里面放一些<br>标签，把文字分成两行。