使用 Bootstrap 3,是否可以使列换行并与行中最大列的高度相同?
我知道可以强制同一行中的所有列具有相同的高度 using flexbox ,但是当列换行时是否可以具有相同的列高?
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
div[class*='col-'] {
background-color: #eaeaea;
border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row display-flex">
<div class="col-md-6">
ShouldBeSameHeightAsMultiLineColumn
</div>
<div class="col-md-6">
Multi line content that will wrap to the next line. Multi line content that will wrap to the next line. Multi line content that will wrap to the next line.
</div>
<div class="col-md-6">
ShouldBeSameHeightAsMultiLineColumn
</div>
<div class="col-md-6">
ShouldBeSameHeightAsMultiLineColumn
</div>
</div>
最佳答案
在本例中我将使用 jQuery。
$(document).ready(function(){
var biggestHeight = 0;
var flexColumns = $('.display-flex > div');
flexColumns.each(function(){
if($(this).height() > biggestHeight){
biggestHeight = $(this).height();
}
});
flexColumns.height(biggestHeight);
});
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
div[class*='col-'] {
background-color: #eaeaea;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row display-flex">
<div class="col-md-6">
ShouldBeSameHeightAsMultiLineColumn
</div>
<div class="col-md-6">
Multi line content that will wrap to the next line. Multi line content that will wrap to the next line. Multi line content that will wrap to the next line.
</div>
<div class="col-md-6">
ShouldBeSameHeightAsMultiLineColumn
</div>
<div class="col-md-6">
ShouldBeSameHeightAsMultiLineColumn
</div>
</div>
关于css - 使用 Bootstrap 3 是否可以使列换行并具有相同的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44557384/