Bootstrap cols 比内容短答案

【问题标题】：Bootstrap cols shorter than contentBootstrap cols 比内容短
【发布时间】：2021-02-04 16:39:06
【问题描述】：

最近，我在尝试让我的网络应用程序在小型设备上工作时遇到了问题。即便如此，这似乎并不总是一个问题，这取决于手机的方向。我看到的是说我有一个带有 col-3 col-6 col-3 设置的 Bootstrap 4 ROW。中心 col 具有更高的高度，包括淡入和淡出不透明度的图像，因此高度是恒定的。当 BS 为较小的显示器做事时，第一个 col-3 会正确中断，为 col-6 留出空间。问题是 col-6 似乎在 col-3 高度断裂，我过度研磨。使用开发工具时，我可以看到是这种情况，但我不想设置一个硬高度，因为这会使间距变得奇怪并破坏整个 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 重叠的位置（蓝色图标）

顺便说一句，我已经设置了中心 col 的高度，因为没有它，我就没有那个 col 的高度。我已经尝试过操纵它，但似乎无论我做什么，它都会针对一个布局方向修复它并弄乱其他布局方向。我必须在 BS 中遗漏一些简单的东西。提前感谢您的帮助。

【问题讨论】：

标签： css bootstrap-4 height overflow responsive

【解决方案1】：

该行具有定义边距的内联样式，可能是视图单元导致了问题。尝试将其更改为 % 或 px 以查看它的行为或一起删除该边距并使用引导程序的边距实用程序。我能想到的另一件事是尝试将重叠元素包装在两个不同的 .container-fluid 中

【讨论】：

【解决方案2】：

所以，我最终做了我认为使用 jQuery 作弊的事情。我给 col div 一个 ID 为 #mcsCol 并将其放入我的 $(document).ready(function)

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

所以本质上，它会检查图像的高度并将 col 设置为相同的高度。如果您有更原生的解决方案，我很乐意看到它。

【讨论】：