javascript

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

  • воскресенье, 26 марта 2017 г. в 03:14:36
https://habrahabr.ru/post/324858/
  • JavaScript
  • HTML
  • CSS


При работе с фреймворком 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>