Bootstrap 3 - 列与 flexbox 等高答案

【问题标题】：Bootstrap 3 - columns equal height with flexboxBootstrap 3 - 列与 flexbox 等高
【发布时间】：2017-10-18 01:03:30
【问题描述】：

我试图获得具有相同高度列的行，无论内容如何，底部的链接都包含所有列。这是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;
}

【问题讨论】：

标签： twitter-bootstrap-3 flexbox

【解决方案1】：

如果您使用margin-top: auto; 代替最后一个锚点，它将位于底部。

堆栈sn-p

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

【讨论】：

干杯@LGSon。为什么它是margin-top而不是flex-end？实际上，我想我在一两年前就看到了这个，直到我看到你的答案才忘记。
啊，有什么办法可以让按钮正常显示，而且不会伸出？
@PierceMcGeough align-items: flex-end 应该设置在 flex 容器上，如果要在 flex 项目上使用，它应该是 align-self，但是对于 flex 列方向这意味着左/右（沿着交叉轴），因此这里需要自动边距。
@PierceMcGeough 按钮正常是什么意思？
工作愉快。非常感谢

【解决方案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

【讨论】：