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