- PVSM.RU - https://www.pvsm.ru -
При работе с фреймворком Bootstrap обычно сталкиваются с тремя основными проблемами:
Для решения первых двух проблем, необходимо скачать небольшой плагин https://github.com/codekipple/conformity [1]
Решение третьей проблемы подсмотрено здесь http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns [2]
<style>
[class*=col-] {position: relative}
.row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
.row-centered {text-align:center}
.row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top}
</style>
<script src="assets/conformity/conformity.js"></script>
<script>
$(document).ready(function () {
$('.row-conformity > [class*=col-]').conformity();
$(window).on('resize', function() {
$('.row-conformity > [class*=col-]').conformity();
});
});
</script>
<div class="row row-conformity">
<div class="col-sm-3">
Я<br>самая<br>высокая<br>колонка
</div>
<div class="col-sm-3">
<div class="to-bottom">
Я прижат книзу
</div>
</div>
</div>
<div class="row row-conformity">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
<div class="row row-centered">
<div class="col-sm-3">...</div>
<div class="col-sm-4">...</div>
</div>
<div class="row row-conformity row-centered">
...
</div>
Автор: vladalivan
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/250813
Ссылки в тексте:
[1] https://github.com/codekipple/conformity: https://github.com/codekipple/conformity
[2] http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns
[3] Источник: https://habrahabr.ru/post/324858/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.