我正在嘗試使用與所有列底部的鏈接無關的內容來獲得具有相同高度列的行。這是一個JS BIN,代碼如下。Bootstrap 3 - 與Flexbox相等的高度的列
<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;
}
乾杯@LGSon。爲什麼它是保證金最高的而不是最終的?我實際上認爲我在一兩年之前就看到了這一點,直到我看到您的答案才被忘記。 –
啊有沒有什麼辦法讓按鈕正常顯示,而不是伸展? –
@PierceMcGeough'align-items:flex-end'應該在flex容器上設置,如果在flex項目上使用,它應該是'align-self',但是對於flex列方向,這意味着左/右橫軸),因此在此需要自動保證金。 – LGSon