Css 引导响应col对齐，中间有重叠图像

使用引导进行响应div对齐时出现问题。 代码：

因此，我可以全屏显示： 这是一个很小的问题： 需要在完整屏幕上显示类似的内容： 以小分辨率：

---

使用响应性边距UTIL 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>

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

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

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

<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>