Bootstrap 4 Carousel: Как складывать элементы контейнера вместо встроенных - PullRequest
Новая
       49

Bootstrap 4 Carousel: Как складывать элементы контейнера вместо встроенных

0 голосов
/ 05 июля 2018

Желание складывать содержимое каждого слайда (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>

Текущий формат по умолчанию

Желаемый формат

Я впервые использую версию 4, поэтому немного свежее в использовании d-flex и т. Д. Буду признателен за любую помощь:)

1 Ответ

0 голосов
/ 05 июля 2018

Вам необходимо добавить .flex-column к вашему .d-flex div. Но также необходимо поместить тег <br> внутри <h2>, чтобы разделить текст на две строки.

...