使用Bootstrap 3是否可以使用列進行換行並使其高度相同？

使用引導程序3，是否可以有列包裝並與行中最大的列高度相同？使用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>

來源

2017-06-15 Craig Curtis

在這種情況下，我會使用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>

來源

2017-06-15 02:24:03

使用Bootstrap 3是否可以使用列進行換行並使其高度相同？

回答

相關問題