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中。但是还需要在<br>内放置一些<h2>标签，以将文本分成两行。