Bootstrap 响应式 col 对齐与中心覆盖图像答案

【问题标题】：Bootstrap responsive col alignment with overlay image in centerBootstrap 响应式 col 对齐与中心覆盖图像
【发布时间】：2019-08-24 04:40:13
【问题描述】：

使用引导程序的响应式 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%;
}

结果我全屏显示：

这在小：

全屏需要这样的东西：

小分辨率：

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 alignment

【解决方案1】：

使用响应式边距工具（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

【讨论】：