Css 引导cols比内容短

最近，我在尝试让我的web AP与小型设备一起工作时遇到了一个问题。即使如此，这似乎并不总是一个问题，它将取决于手机的方向。我看到的是，我有一个引导4行，带有col-3 col-6 col-3设置。中心颜色具有更高的高度，并且包含淡入和淡出不透明度的图像，因此高度是恒定的。当BS对较小的显示器执行其操作时，第一个col-3会正确断开，为col-6留出空间。问题是col-6似乎在col-3的高度处断裂，我被搭接了。当使用dev工具时，我可以看到这种情况，但我不想设置一个硬高度，因为这会使间距变得奇怪，并破坏整个BS的目的。以下是一些例子：

<div class="row" style="margin: 0vh 5vw;">
  <div class="col-md-3 col-sm-12 text-center wow fadeInLeft">
    <div>
      <i class="fa fa-eye features-icon"></i>
      <h2 style="color: white; font-size: 3vmin">Something</h2>
    </div>
  </div>
  <div class="col-md-6 col-sm-12 text-center  wow" style="height: 53vh;">
    <img id="img1" src="myImage.jpg" alt="dashboard" class="img-fluid img1" style="margin-top: 3vh; 
       display:block; position:absolute; opacity: 1;">
    <img id="img2" src="~/anotherImage.png" alt="dashboard" class="img-fluid img2" style="margin-top: 
       3vh; display:block;position:absolute; opacity: 0;">                   
  </div>
  <div class="col-md-3 col-sm-12 text-center wow fadeInRight">
    <div>
     <i class="fa fa-database features-icon"></i>
     <h2 style="color: white; font-size: 3vmin">More blah blah</h2>                    
    </div>
  </div>
</div>

某物
更多废话

此图显示col重叠的位置（蓝色图标）

顺便说一句，我已经设置了中心柱高度，因为没有它，我就没有那个柱的高度。我尝试过操纵它，但似乎无论我做什么，它都会为一个布局方向修复它，并搞乱其他方向。我一定错过了一些简单的BS。提前感谢你的帮助

---

该行具有定义边距的内联样式，可能是视图单位导致了问题。尝试将其更改为%或px，以查看其行为，或者一起删除该边距，并使用bootstrap的边距实用程序。我能想到的另一件事是尝试将两个不同的元素包起来，容器流体

，所以我最终使用jQuery做了我认为是一个骗局。我给col div一个id#mcsCol，并把它放在我的$（document.ready（function）中

因此，本质上，它将检查图像的高度，并将col设置为相同的高度。如果你有一个更自然的解决方案，我很想看看

$("#mcsCol").css({ "height": $("#img1").css("height") });