Ist es möglich, Spalten mit Bootstrap 3 zu wickeln und die gleiche Höhe zu haben?

Question

Kann Bootstrap 3 Spalten umbrechen und die gleiche Höhe wie die größte Spalte in der Zeile haben?

Ich weiß, dass es möglich ist, Spalten mit der gleichen Höhe in der gleichen Zeile using flexbox zu erzwingen, aber ist es möglich, die gleichen Spaltenhöhen zu haben, wenn die Spalten umbrechen?

.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>

Answer 1

In diesem Fall habe ich jQuery verwenden.

$(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>