Выравнивание в Bootsrap

При работе с фреймворком Bootstrap обычно сталкиваются с тремя основными проблемами:

  1. Как поместить контент внизу колонки?
  2. Как создать многорядную галерею колонок одинаковой высоты в одном .row?
  3. Как центрировать горизонтально несколько колонок, если их суммарная ширина меньше 12 единиц и оставшаяся ширина нечетна?

Для решения первых двух проблем, необходимо скачать небольшой плагин https://github.com/codekipple/conformity

Решение третьей проблемы подсмотрено здесь http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

Общий код

<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>

1. Как поместить контент внизу колонки?

<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>

2. Многорядная галерея колонок одинаковой высоты в одном .row

<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>

3. Горизонтальное центрирование нескольких колонок, если их суммарная ширина меньше 12 единиц и оставшаяся ширина нечетна

<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>

ссылка на оригинал статьи https://habrahabr.ru/post/324858/

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *