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> 标记，以便将文本分成两行。

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

Bootstrap 4 Carousel: How to stack container items instead of inline

css

bootstrap-carousel

bootstrap-4