css - 垂直对齐 Bootstrap 行之间的元素

Question

This is a JSFiddle这显示了我尝试在 3 列底部放置 3 个按钮。我使用 flexbox 来确保所有 3 列具有相同的高度，但是为了使按钮位于每列的底部，我必须使它们绝对定位。因此，按钮的大小不考虑列的大小。有什么适当的方法可以避免这种情况(不使用占位符元素/边距/等)？

HTML:

<div class="container">
  <div class="row row-same-height">
    <div class="col-md-4">
      <h2>Responsive</h2>
      <!--<h4> εξαρτημένη από το ένα άκρο </h4>-->
      <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id varius leo. Aliquam erat volutpat. Proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. Nullam consectetur rutrum pretium. Vivamus imperdiet elementum neque,
        vel volutpat leo mattis in. Nam luctus pellentesque dui sed vulputate. Curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>
      <p class="stick-to-bottom"><a class="btn btn-primary" href="per1.html" role="button">View
                details &raquo;</a></p>
    </div>
    <div class="col-md-4">
      <h2>But</h2>
      <p style="text-align: justify">Aliquam id congue libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ullamcorper sapien nulla, eget fermentum est mattis non. Morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. Aenean consequat felis
        urna, ut eleifend sapien tempus a. Phasellus porta mi non venenatis condimentum. Aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. Praesent metus est, lobortis eget urna a, luctus condimentum eros. Curabitur gravida maximus augue
        molestie ultricies. Mauris ac urna ac lorem sagittis auctor. Etiam facilisis rhoncus sapien, at aliquam ligula euismod ac. Vestibulum quis condimentum neque. Morbi ornare aliquam consectetur. Mauris ipsum ligula, vulputate sed tristique hendrerit,
        pellentesque fringilla nisl.</p>
      <p class="stick-to-bottom"><a class="btn btn-primary" href="per2.html" role="button">View
                details &raquo;</a></p>
    </div>
    <div class="col-md-4">
      <h2>Wrong</h2>
      <p style="text-align: justify">Duis eu nibh viverra, pretium risus id, egestas odio. Suspendisse potenti. Praesent aliquet massa sit amet nunc bibendum pellentesque. Mauris consectetur auctor magna vel consequat. Aliquam sit amet nunc quam. Vivamus eu nisi ac est viverra vehicula
        lobortis sit amet lorem. Cras ut pellentesque nisi. Curabitur ornare imperdiet quam sit amet efficitur. Vivamus viverra felis at bibendum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
        vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. Integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>
      <p class="stick-to-bottom"><a class="btn btn-primary" href="per3.html" role="button">View
                details &raquo;</a></p>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row row-same-height">
    <div class="col-md-4">
      <h2>Looks as intended</h2>
      <!--<h4> εξαρτημένη από το ένα άκρο </h4>-->
      <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id varius leo. Aliquam erat volutpat. Proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. Nullam consectetur rutrum pretium. Vivamus imperdiet elementum neque,
        vel volutpat leo mattis in. Nam luctus pellentesque dui sed vulputate. Curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>
    </div>
    <div class="col-md-4">
      <h2>But</h2>
      <p style="text-align: justify">Aliquam id congue libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ullamcorper sapien nulla, eget fermentum est mattis non. Morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. Aenean consequat felis
        urna, ut eleifend sapien tempus a. Phasellus porta mi non venenatis condimentum. Aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. Praesent metus est, lobortis eget urna a, luctus condimentum eros. Curabitur gravida maximus augue
        molestie ultricies. Mauris ac urna ac lorem sagittis auctor. Etiam facilisis rhoncus sapien, at aliquam ligula euismod ac. Vestibulum quis condimentum neque. Morbi ornare aliquam consectetur. Mauris ipsum ligula, vulputate sed tristique hendrerit,
        pellentesque fringilla nisl.</p>
    </div>
    <div class="col-md-4">
      <h2>Not Responsive</h2>
      <p style="text-align: justify">Duis eu nibh viverra, pretium risus id, egestas odio. Suspendisse potenti. Praesent aliquet massa sit amet nunc bibendum pellentesque. Mauris consectetur auctor magna vel consequat. Aliquam sit amet nunc quam. Vivamus eu nisi ac est viverra vehicula
        lobortis sit amet lorem. Cras ut pellentesque nisi. Curabitur ornare imperdiet quam sit amet efficitur. Vivamus viverra felis at bibendum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
        vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. Integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>
    </div>
  </div>
  <div class="row">
    <p class="col-md-4"><a class="btn btn-primary" href="per1.html" role="button">Viewdetails &raquo;</a></p>

    <p class="col-md-4"><a class="btn btn-primary" href="per2.html" role="button">View details &raquo;</a></p>
    <p class="col-md-4"><a class="btn btn-primary" href="per3.html" role="button">View details &raquo;</a></p>
  </div>
</div>

CSS:

.row-same-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.stick-to-bottom {
  position: absolute;
  bottom: 0;
}

Answer 1

你已经在使用 flexbox，所以使用 flexbox。你到底为什么要绝对定位？

您只需要垂直 flex 列(使用 flex-direction: column )并使用 justify-content: space-between .您可能还想输入:flex: 1在 <p> 上其中包含文本内容的标签(因为内容的长度不同):

.row-same-height .col-md-4 {
    display: flex;
    flex-flow: column nowrap; /* a shorthand for `flex-direction` and `flex-wrap` */
    justify-content: space-between;
}
.row-same-height p:first-of-type {
    flex: 1;
}

并添加您喜欢的任何供应商前缀。这是您更新的 Fiddle .干杯!