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

Question

使用引导程序时，响应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