Я использовал 2 пользовательских класса для уже созданной структуры HTML. \
трехсекционный класс для родительского div
text-sm-center класс для родительского элемента кнопки.
Вот список решений:
Решение для выравнивания кнопок:
Задайте минимальную высоту абзаца в соответствии с вашим самым длинным абзацем.
.three-section p {
min-height: 160px
}
Решение для кнопки, выровненной по центру в xs и sm:
Напишите медиазапрос с именем класса text-sm-center , который будет применен к вашему коду кнопки div, а такжеавтоматическая настройка высоты абзаца, чтобы он не соответствовал минимальной высоте, указанной ранее.
@media (max-width: 767px) {
// Align text to center.
.text-sm-center {
text-align: center;
}
.three-section p {
min-height: inherit;
}
}
.three-section p {
min-height: 160px
}
@media (max-width: 1260px) {
.three-section p {
min-height: 200px
}
}
@media (max-width: 962px) {
.three-section p {
min-height: inherit;
}
.text-sm-center {
text-align: center;
}
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="three-section">
<div class="col-md-4">
<h3><b>penatibus</b></h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<div class="text-sm-center">
<a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details >></a>
</div>
</div>
<div class="col-md-4">
<h3><b>sociis penatibus</b></h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
<div class="text-sm-center">
<a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a>
</div>
</div>
<div class="col-md-4">
<h3><b>Morbi penatibus</b></h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<div class="text-sm-center">
<a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a>
</div>
</div>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>