在Bootstrap3中将一列分成两行时如何获得等高的列[重复]答案

【问题标题】：How to get equal height columns when one column is split into two rows within Bootstrap3 [duplicate]在Bootstrap3中将一列分成两行时如何获得等高的列[重复]
【发布时间】：2020-05-21 11:59:26
【问题描述】：

我需要一个如上所述的 BOOTSTRAP 3 网格布局，它只是两列，第一列分为两行。 Col1 将保存一些文本，每行中的列表，Col2 将保存一个图像。列需要等高 - 我无法达到等高。

我正在使用这个 css，它在其他领域可以完美地实现列的相等高度，但是这些列没有被分成行。

.row{
    overflow: hidden; 
}

[class*="col-md"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

我尝试过使用表格单元，并使用最大/最小高度，但没有什么是一致的。

当其中一列在 Bootstrap 3 网格中拆分为行时，如何实现等高列？

Fiddle

提前谢谢你。

【问题讨论】：

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

为什么不用网格？

POC：

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 1fr 1fr;
  margin: 10px;
  border: solid 1px;
  width: 200px;
}

.item1,
.item2,
.item3 {
  border: solid 1px;
  padding: 10px;
}

.item1 {
  grid-row: 1 / 2;
}

.item2 {
  grid-row: 2 / 3;
}

.item3 {
  grid-row: 1 / 3;
}

<div class="container">
  <div class="item1">item 1</div>
  <div class="item2">item 2</div>
  <div class="item3">item 3</div>

</div>

grid 的智能布局非常简单。

【讨论】：