是否可以使用Bootstrap 3包裹列并使用相同的高度？

Question

使用Bootstrap 3，是否可以将列换行并与行中最大列的高度相同？

我知道可以强制列在同一行using flexbox中具有相同的高度，但是当列包裹时是否可以具有相同的列高度？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在这种情况下，我将使用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>