Question

我在Bootstrap 4中有一个非常简单的设计，基于Jumbotron Example。我的问题是按钮都处于不同的高度，具体取决于前面的文字。在示例中，提供的文本几乎具有相同的长度，因此差异并不明显。但是，我想对齐列底部的所有按钮，以便它们全部对齐。这可能吗？如果是这样，怎么样？

到目前为止，这是我的代码：

<div class="row">
    <div class="col-md-4">
        <h2>Topic 1</h2>
        <p>Very short paragraph!</p>
        <p><a class="btn btn-danger" href="#" role="button">View more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Topic 2</h2>
        <p>Very short paragraph!</p>
        <p><a class="btn btn-danger" href="#" role="button">View more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Topic 3</h2>
        <p>Very long paragraph, which completely throws the perceived design off and makes me want to quite HTML forever!</p>
        <p><a class="btn btn-success" href="#" role="button">View more &raquo;</a></p>
    </div>
</div>
<hr>

到目前为止我尝试了什么：

将align-self-end课程添加到按钮周围的<p>。这是在official documentation中提出的，但没有做任何事情。
将align-self-end类添加到col元素。这会将整个列向下移动，导致标题不再对齐。这基本上解决了这个问题。
创建另一个row元素，有效地将每个按钮移动到一个新行。虽然这让我得到了桌面和平板电脑视图所需的确切布局，但它会从移动视图中的按钮中分离段落。虽然这可能是一种解决方法，但它似乎更像是一种黑客行为。

Answer 1

这是：

Bootply ：https://www.bootply.com/JxHrkuGR5n

<强> CSS ：

@media screen and (min-width: 992px) {
 .row{display:flex;align-items:stretch;}
 .row > .col-md-4{width: calc(100% / 3);display: flex;   flex-direction: column;}
 .row > .col-md-4 > p {margin-top: auto;}
. row:before{content:none;  }   
}

<强> HTML ：

<div class="row">
    <div class="col-md-4">
        <h2>Topic 1</h2>
        <p>Very short paragraph!</p>
        <p><a class="btn btn-danger" href="#" role="button">View more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Topic 2</h2>
        <p>Very short paragraph!</p>
        <p><a class="btn btn-danger" href="#" role="button">View more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Topic 3</h2>
        <p>Very long paragraph, which completely throws the perceived design off and makes me want to quite HTML forever!</p>
        <p><a class="btn btn-success" href="#" role="button">View more »</a></p>
    </div>
</div>
<hr>

如何将按钮对齐到列的底部？

1 个答案: