【问题标题】:Bootstrap 4 Carousel: How to stack container items instead of inlineBootstrap 4 Carousel:如何堆叠容器项目而不是内联
【发布时间】:2018-07-05 01:24:01
【问题描述】:

想要垂直堆叠每张幻灯片(一个 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 等有点新鲜。任何帮助将不胜感激:)

【问题讨论】:

    标签: css bootstrap-4 bootstrap-carousel


    【解决方案1】:

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

    【讨论】:

    • 非常感谢。 h2 中的 br 在示例中被错误地省略了,但是 .flex-column 很有效。现在来学习这些弹性课程!
    • 你可以查看 CSS-Tricks 了解更多关于 flex box css-tricks.com/snippets/css/a-guide-to-flexbox
    猜你喜欢
    • 2019-03-07
    • 2018-07-16
    • 2018-05-11
    • 2019-07-31
    • 2018-12-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-16
    相关资源
    最近更新 更多