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

Posted 2023-05-08

【中文标题】在Bootstrap3中将一列分成两行时如何获得等高的列[重复]

【英文标题】：How to get equal height columns when one column is split into two rows within Bootstrap3 [duplicate]

【发布时间】：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

提前谢谢你。

【参考方案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 的智能布局非常简单。

更多信息：https://css-tricks.com/snippets/css/complete-guide-grid/