Как мне заставить сетки выглядеть так, используя Bootstrap 4 сетки? - PullRequest
Новая
       5

Как мне заставить сетки выглядеть так, используя Bootstrap 4 сетки?

0 голосов
/ 12 апреля 2020

Я не могу понять, как получить требуемый результат, используя сетку Bootstrap 4. Так выглядит часть сайта в режиме рабочего стола. 2, 3 и 6 - изображения, а остальные текстовые.

desktop

Так должен выглядеть тот же сайт в мобильном телефоне.

mobile

HTML: 

<section class="col-12">
<div class="row">
    <div class="col-12">
        <div class="row">
            <div class="col-12 col-sm-6 order-2 order-sm-1">
                <divclass="row">
                    <div class="col-12">
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 order-1 order-sm-2">
                <img src=""/>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="row">
            <div class="col-12 col-sm-6">
                <img src=""/>
            </div>
            <div class="col-12 col-sm-6">
                <div class="row">
                    <div class="col-12">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="row">
            <div class="col-12 col-sm-6 order-2 order-sm-1">
                <div class="row">
                    <div class="col-12">
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 order-1 order-sm-2">
                <img src=""/>
            </div>
        </div>
    </div>
</div>
</section>

Вот ссылка на проект: https://rohithandique.github.io/Rare-Monk-Website/ и для 4,5,6 в css я положил: 

position: relative;
top: -25%;

, чтобы получить желаемый результат. но это оставляет широкий разрыв внизу. Итак, как мне изменить мои Bootstrap классы, чтобы получить желаемый результат? Я новичок.

РЕДАКТИРОВАТЬ: перепробовал все решения и обнаружил, что использование сетки CSS дало больше гибкости в этой ситуации, так как расположение элементов HTML было исправлено, а bootstrap 4 не позволяет такое смешение.

Ответы [ 3 ]

0 голосов
/ 12 апреля 2020

Эй, пожалуйста, попробуйте использовать bootstrap контейнер с жидкостью таким образом, вы получите желаемый результат, например, желаемый. Перейдите по ссылке https://getbootstrap.com/docs/3.4/css/

0 голосов
/ 13 апреля 2020
Сетка

Bootstrap display:flex flex-direction:column

Вы не можете стилизовать их так, как вам придется использовать для нее пользовательский css !!!!

его так просто.

0 голосов
/ 12 апреля 2020

Вы должны использовать CSS Grid современный API, который заменяет гибкий и старый CSS материал. Вы можете достичь любого макета, который вы хотите. Имейте в виду, что это двумерно.
Это лучшее, что вы можете получить. Легко учиться.

...