css - Bootstrap 响应式列对齐，叠加图像居中

Question

使用 bootstrap 的响应式 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%;
}

结果我全屏显示了这个:

还有这个小的:

在全屏上需要这样的东西:

在小分辨率下:

Answer 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