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;代替最后一个锚点，它将位于底部。

Stack snippet

.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

Bootstrap 3 - 与flexbox相等的高度

2 个答案: