Bootstrap отзывчивое выравнивание col с наложенным изображением в центре - PullRequest
Новая
       33

Bootstrap отзывчивое выравнивание col с наложенным изображением в центре

0 голосов
/ 02 апреля 2019

Возникли проблемы с адаптивным выравниванием div с использованием начальной загрузки. Код: 

<div class="container-fluid">
    <div class="row">
        <div class="col-xl-5">
            <img src="/images/big_img.jpg}"/>
        </div>
        <div class="col-xl-2 vs">
            <img src="/images/small_img.jpg}"/>
        </div>
        <div class="col-xl-5">
            <img src="/images/big_img.jpg}"/>
        </div>

    </div>
</div>

CSS: 

.row {
    text-align: center;
}
.col-xl-5 {
    display:inline-block;
}

.col-xl-2 {
    display:inline-block;
}

.vs img {
    display: block;
    height: auto;
    width: 100%;
}

И в результате у меня это на весь экран:

full screen alignment

А это по маленькому:

small screen alignment

Нужно что-то подобное на полный экран:

need full screen alignment

И в небольшом разрешении:

need small screen alignment

1 Ответ

1 голос
/ 02 апреля 2019

Играйте с отзывчивыми маржинальными утилитами (mx-xl-n5, mx-0, my-xl-0, my-n5 и т. Д.). Отрицательные поля создадут эффект наложения в центре. 

<div class="container-fluid">
    <div class="row align-items-center no-gutters">
        <div class="col-xl text-center text-xl-right my-2">
            <img src="//placehold.it/300"/>
        </div>
        <div class="col-xl-auto text-center mx-xl-n5 px-1 mx-0 my-xl-0 my-n5 vs">
            <img src="//placehold.it/100/22cc22"/>
        </div>
        <div class="col-xl text-center text-xl-left my-2">
            <img src="//placehold.it/300"/>
        </div>
    </div>
</div>

https://www.codeply.com/go/VaALMWei4G

...