我有以下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％的子元素,就像我在这个例子？
解决方法
阅读：
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>
