引导列具有相同高度

Question

我有以下的html代码：

<div class="container"> 
    <div class="row row1"> 
     <div class="col col1 col-md-3"> 
      Column 1 
     </div> 
     <div class="col col2 col-md-3"> 
      Column 2 
     </div> 
     <div class="col col3 col-md-3"> 
      <div class="row"> 
       Column 3 
      </div> 
      <div class="row"> 
       Column 4 
      </div> 
     </div> 
    </div> 

我使用的是引导网格布局系统，我想实现这样的事情：

的想法是col1和col2应该具有与col3和col4相同的高度。

有没有一种方法做到这一点，没有指定容器的高度和设置儿童元素的高度100％，就像我在这个例子中做的那样？

Jsfiddle demo

Answer 1

阅读：How can I make Bootstrap columns all the same height?

您可以使用：

.row{ 
    overflow: hidden; 
} 

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

这里有一个可运行的例子：

.row{ 
 
    overflow: hidden; 
 
} 
 

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

 
.row1 { 
 
    height: 100%; 
 
} 
 

 
.col1{ 
 
    background-color: red; 
 
    color: white; 
 
    height: 100%; 
 
} 
 

 
.col2{ 
 
    background-color: green; 
 
    color: white; 
 
    height: 100%; 
 
} 
 

 
.col3{ 
 
    background-color: yellow; 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row row1"> 
 
     <div class="col col1 col-xs-3"> 
 
      Column 1 
 
     </div> 
 
     <div class="col col2 col-xs-3"> 
 
      Column 2 
 
     </div> 
 
     <div class="col col3 col-xs-3"> 
 
      <div class="row"> 
 
       Column 3 
 
      </div> 
 
      <div class="row"> 
 
       Column 4 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

您可以尝试使用显示：弯曲这样的：

.row-full-height { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

Here的工作小提琴

.col1 { 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
.col2 { 
 
    background-color: green; 
 
    color: white; 
 
} 
 

 
.col3 { 
 
    background-color: yellow; 
 
} 
 

 
.row-full-height { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
}

<div class="container"> 
 
    <div class="row row-full-height row1"> 
 
    <div class="col col1 col-md-3"> 
 
     Column 1 
 
    </div> 
 
    <div class="col col2 col-md-3"> 
 
     Column 2 
 
    </div> 
 
    <div class="col col3 col-md-3"> 
 
     <div class="row"> 
 
     Column 3 
 
     </div> 
 
     <div class="row"> 
 
     Column 4 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>