Вертикально выровняйте элементы между строками бутстрапа

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-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. Ура!