Bootstrap 3 - 與Flexbox相等的高度的列

Question

我正在嘗試使用與所有列底部的鏈接無關的內容來獲得具有相同高度列的行。這是一個JS BIN，代碼如下。

<div class="container"> 

    <h4 class="report_list__title">Activites</h4> 
    <div class="row report_list"> 

     <div class="col-xs-3 report_list__item"> 
      <a href="#" class="report_list__item_heading">Activity 1</a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 

      <a href="#" class="btn btn-primary">View</a> 
     </div> 

     <div class="col-xs-3 report_list__item">    
      <a href="#" class="report_list__item_heading">Activity 2</a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 

      <a href="#" class="btn btn-primary">View</a>    
     </div> 

     <div class="col-xs-3 report_list__item">    
      <a href="#" class="report_list__item_heading">Activity 3</a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 

      <a href="#" class="btn btn-primary">View</a>    
     </div> 

     <div class="col-xs-3 report_list__item"> 
      <a href="#" class="report_list__item_heading">Activity 4</a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 

      <a href="#" class="btn btn-primary">View</a> 
     </div> 

    </div> 

    <h4 class="report_list__title">Marketing</h4> 
    <div class="row report_list report_list--last"> 
     <div class="col-xs-3 report_list__item"> 
      <a href="#" class="report_list__item_heading">Marketing 1</a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 

      <a href="#" class="btn btn-primary">View</a> 
     </div> 
    </div> 

</div> 


.report_list { 
    display: flex; 
    border-bottom: 1px solid #ccc; 
    padding-bottom: 10px; 
} 

.report_list--last { 
    border: none; 
} 

.report_list__title { 
    margin-top: 20px; 
} 

.report_list__item { 
    border: 1px solid green; 
    display: inline-flex; 
    flex-direction: column; 
} 

.report_list .report_list__item a { 
    align-items: flex-end; 
} 

Answer 1

如果使用margin-top: auto;而不是爲最後一個錨將位於底部。

棧片斷

.report_list { 
 
    display: flex; 
 
    border-bottom: 1px solid #ccc; 
 
    padding-bottom: 10px; 
 
} 
 

 
.report_list--last { 
 
    border: none; 
 
} 
 

 
.report_list__title { 
 
    margin-top: 20px; 
 
} 
 

 
.report_list__item { 
 
    border: 1px solid green; 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
} 
 

 
.report_list .report_list__item a:last-child { 
 
    margin-top: auto;      /* push to bottom */ 
 
    align-self: center;     /* hor. center */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    
 
    <h4 class="report_list__title">Activites</h4> 
 
    <div class="row report_list"> 
 
     
 
     <div class="report_list__item"> 
 
      
 
      <a href="#" class="report_list__item_heading">Activity 1</a> 
 
      <p>List and filter all sales property viewings.</p> 
 
      
 
      <a href="#" class="btn btn-primary">View</a> 
 
      
 
     </div> 
 
     
 
     <div class="report_list__item"> 
 
      
 
      <a href="#" class="report_list__item_heading">Activity 2</a> 
 
      <p>List and filter all sales property valuations.</p> 
 
      <p>List and filter all sales property valuations.</p> 
 
      
 
      <a href="#" class="btn btn-primary">View</a> 
 
      
 
     </div> 
 
     
 
     <div class="report_list__item"> 
 
      
 
      <a href="#" class="report_list__item_heading">Activity 3</a> 
 
      <p>List and filter all sales properties with missing EPCs.</p> 
 
      
 
      <a href="#" class="btn btn-primary">View</a> 
 
      
 
     </div> 
 
     
 
     <div class="report_list__item"> 
 
      
 
      <a href="#" class="report_list__item_heading">Activity 4</a> 
 
      <p>List and filter all sales property offers.</p> 
 
      
 
      <a href="#" class="btn btn-primary">View</a> 
 
      
 
     </div> 
 
     
 
    </div> 
 
    
 
    <h4 class="report_list__title">Marketing</h4> 
 
    <div class="row report_list report_list--last"> 
 
     
 
     <div class="col-xs-3 report_list__item"> 
 
      
 
      <a href="#" class="report_list__item_heading">Marketing 1</a> 
 
      <p>List and filter all sales property viewings.</p> 
 
      
 
      <a href="#" class="btn btn-primary">View</a> 
 
      
 
     </div> 
 
     
 
    </div>

Answer 2

我想如果您添加到了.report_list__item它可能工作：

justify-content: space-between; 
flex:0 0 200px; 

這篇文章是相當不錯了Flexbox的佈局例子： https://medium.com/coderbyte/a-guide-to-becoming-a-full-stack-developer-in-2017-5c3c08a1600c