Bootstrap 3 列对所有行具有相同的高度答案

【问题标题】：Bootstrap with 3 column having same height for all rowBootstrap 3 列对所有行具有相同的高度
【发布时间】：2020-11-10 09:37:11
【问题描述】：

我正在尝试创建一个 3 列 div，该 div 对于包含 ICON 和信息的所有响应/行应该具有相同的高度

<div class="container">
  <div class="row row-eq-height">
    <div class="col col-4 border">
        <i class="fas fa-home fa-5x"></i>
        <span>Column1</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-file-invoice fa-5x"></i>
        <span>Column2</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-exchange-alt fa-5x"></i>
        <span>Column3</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-gamepad fa-5x"></i>
        <span>Column4</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-users fa-5x"></i>
        <span>Column5</span>
    </div>
    <div class="col col-4 border">Column6</div>
    <div class="col col-4 border">Column7</div>
    <div class="col col-4 border">Column8</div>
    <div class="col col-4 border">Column9</div>
    <div class="col col-4 border">Column10</div>
  </div>
</div>

div 高度仅取决于特定行的图标大小
即使没有图标，我也希望所有高度都相等
图标大小固定为 fa-5x
如何根据浏览器大小更改图标的大小。
例如 sm-3x、md-4x、lg-5x、xl-6x
图标和文本对齐
我想将文本放在 ICON 下方，同时 ICON 和文本都位于水平和垂直中心。

【问题讨论】：

您的答案在此链接中：How can I make Bootstrap columns all the same height?
感谢您的链接。我已经经历了它，它对我的新想法有很大帮助。但在这种情况下，高度也取决于具有最高高度的行。但我希望所有高度都相同，即使 3 行只包含一个小字符。
我的朋友我在下面给你发了我的示例代码。

标签： html css bootstrap-4

【解决方案1】：

您可以将这些样式添加到您的代码中：我在响应模式下检查了这个。

<style>
    .col-4{
    min-height: 100px;
    text-align: center;
    }
    .col-4 span{
      display:block
    }
    .col-4 i{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
    </style>

【讨论】：

感谢@elham-dabiri 现在除了垂直对齐中心之外，所有设计都可以完美运行。我尝试使用“align-middle”类，但它不起作用。
将这些样式（显示：网格；对齐项：中心；）添加到 .col-4

【解决方案2】：

用于使高度相等的解决方案是将h-100 类添加到card 并放置并放置在col-* attr 中，这会使所有卡片对齐自动高度。

检查下面的 sn-p ：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="card h-100">
        <h4 class="my-2">column 1</h4>
      </div>
    </div>

    <div class="col-4">
      <div class="card mb-4 h-100">
        <h4 class="my-2">column 2</h4>
        Div with larger content that extents to equal height of all div
      </div>
    </div>

    <div class="col-4">
      <div class="card h-100">
        <h4 class="my-2">column 3</h4>
      </div>
    </div>
  </div>
</div>

【讨论】：