Question

我正在尝试创建一个3列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和文本置于水平和垂直中心。

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

Answer 2

用来使高度相等的解决方案是在h-100上添加类card并将其放置在col-*属性内，以使所有卡都自动对齐高度。

检查以下代码段：

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

具有3列且所有行高度相同的Bootstrap

2 个答案: