在Bootstrap3中将一列分为两行时如何获得相等高度的列 [英] How to get equal height columns when one column is split into two rows within Bootstrap3

问题描述

我需要上面的 BOOTSTRAP 3 网格布局，该布局只有两列，第一列分为两行. Col1 将保存一些文本，每行中的列表，而 Col2 将保存图像.列的高度必须相等-我无法达到相同的高度.

I need a BOOTSTRAP 3 grid layout as above which is simply two columns and the first column is split into two rows. Col1 will hold some text, lists in each of the rows and Col2 will hold an image. The columns need to be equal height - I can’t achieve the equal heights.

我正在使用此CSS，它可以在其他区域完美地实现相同高度的列，但是这些列尚未拆分成行.

I am using this css which works perfectly in other areas to achieve the equal heights of columns, but those columns have not been split into rows.

.row{
    overflow: hidden; 
}

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

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

I have tried using table-cells, and using max/min heights, but nothing is consistent.

在Bootstrap 3网格中将其中一列拆分为行时，如何获得等高列?

小提琴

谢谢.

推荐答案

为什么不网格?

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的智能布局非常简单.

smart layouts with grid are very easy.

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

这篇关于在Bootstrap3中将一列分为两行时如何获得相等高度的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！