При работе с bootstrap 3 я использую позиционирование сеткой (таблицей), об этом в начале статьи.

А в bootstrap 4 используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями об этом в середине статьи.

Код скрина выше выглядит следующим образом:

<div class="featurebox col-md-12 col-sm-12 col-xs-12">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="feature text-left">
                            <h4>DESIGN</h4>
                            <p>...</p>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="feature text-left">
                            <h4>REENGINEERING</h4>
                            <p>...</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="feature text-left">
                            <h4>SUPPORT</h4>
                            <p>...</p>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="feature text-left">
                            <h4>INSTRUMENTS</h4>
                            <p>...</p>
                        </div>
                    </div>
                </div>
            </div>

<h4>DESIGN</h4>

</div>

<h4>REENGINEERING</h4>

</div>

<h4>SUPPORT</h4>

</div>

<h4>INSTRUMENTS</h4>

</div>

содержание

Правила игры Bootstrap 3

Класс row задает расположение блоков в виде одной строки;
Строка в bootstrap содержит максимум 12 столбцов;
Класс col-ml-4 задает столбец строки, где
- col (column) — столбец строки;
- md — идентификатор устройства, bootstrap разделил все устройства на 4 группы в зависимости от ширины экрана;
- 4 — количество условных единиц(столбцов) ширины будет занимать блок, из 12. То есть div с классом col-ml-4 займет 1/3 ширины экрана устройства шириной от 992 пикселей;

Типы классов устройств

col-xs-*: для устройств с шириной экрана меньше 768 пикселей;
col-sm-*: для устройств с шириной экрана от 768 пикселей и выше;
col-md-*: для устройств с шириной экрана от 992 пикселя и выше;
col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше;

Как видно из примера выше я использовал сразу три класса одновременно для более детального отображения на различных устройствах

<div class="col-md-6 col-sm-6 col-xs-12">

1	<div class="col-md-6 col-sm-6 col-xs-12">

Так же как видно из кода я использовал разные значения столбцов для разных устройств — главное что бы в общем было 12 единиц. Мы можем задавать любую другую ширину для каждого устройства:

Отступы

Классы col-md(sm|lg)-offset-* задают смещение относительно левого блока или начала строки в условных единицах

<div class="row">
    <div class="col-md-4">
        <h2>Левый блок</h2>
        <p>...</p>
    </div>
    <div class="col-md-4 col-md-offset-4">
        <h2>Правый блок</h2>
        <p>...</p>
    </div>
</div>

<h2>Левый блок</h2>

</div>

<h2>Правый блок</h2>

</div>

Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов col-md(sm|lg)-push-* и col-md(sm|lg)-pull-* мы можем переопределить порядок блоков в строке. Например, класс col-md-push-4 сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4 сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать таким способом:

<div class="row">
    <div class="col-md-4">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-push-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

<h2>Левый блок</h2>

</div>

<h2>Правый блок</h2>

</div>

Либо изменить порядок следования блоков и получить тот же результат

<div class="row">
    <div class="col-md-4 col-md-push-8">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-pull-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

<h2>Левый блок</h2>

</div>

<h2>Правый блок</h2>

</div>

в последнем примере правый блок сместится влево на четыре единицы, а левый блок — вправо на 8 единиц.

Правила игры Bootstrap 4.

Flexbox

Режим flexbox позволяет макету автоматически вычислять размер каждой колонки.

<div class="container">
  <div class="row">
    <div class="col item">
      половина
    </div>
    <div class="col item">
      половина
    </div>
  </div>
  
  <div class="row">
    <div class="col item">
      Одна третья
    </div>
    <div class="col item">
      Одна третья
    </div>
    <div class="col item">
      Одна третья
    </div>
  </div>
</div>

половина

</div>

половина

</div>

Одна третья

</div>

Одна третья

</div>

Одна третья

</div>

Безразмерные колонки в сетке flexbox будут поровну делить доступное пространство, всегда заполняя весь ряд.

Можно указать размер для одной колонки, а остальные колонки равномерно распределят оставшееся пространство между собой. Укажем размер у среднего блока. Остальные распределятся поровну.

<div class="container">
  <div class="row">
    <div class="col item">
      (12 - 6) / 2 = 3
    </div>
    <div class="col-6 item">
      6 колонок
    </div>
    <div class="col item">
      (12 - 6) / 2 = 3
    </div>
  </div>
  
  <div class="row">
    <div class="col item">
      
    </div>
    <div class="col-5 item">
      5 колонок
    </div>
    <div class="col item">
      
    </div>
  </div>
  
  <div class="row">
    <div class="col item">
      
    </div>
    <div class="col-4 item">
      4 колонки
    </div>
    <div class="col item">
      
    </div>
  </div>
</div>

(12 - 6) / 2 = 3

</div>

6 колонок

</div>

(12 - 6) / 2 = 3

</div>

</div>

5 колонок

</div>

</div>

</div>

4 колонки

</div>

</div>

Используя классы col-{breakpoint}-auto, можно создать блок, размер которого будет определяться его содержимым. Также для блока можно задать классы горизонтального выравнивания. В этом случае общий ряд будет сжат до необходимых размеров.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Слово
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>

  <div class="row justify-content-md-start">
    <div class="col col-lg-2 item">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Два слова
    </div>
    <div class="col col-lg-2 item">
      3 of 3
    </div>
  </div>
  
    <div class="row justify-content-md-end">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Здесь три слова
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

1 of 3

</div>

Слово

</div>

3 of 3

</div>

1 of 3

</div>

Два слова

</div>

3 of 3

</div>

1 of 3

</div>

Здесь три слова

</div>

3 of 3

</div>

Можно оставить стандартное поведение, не сжимая общую ширину.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Два слова
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

1 of 3

</div>

Два слова

</div>

3 of 3

</div>

Вы можете использовать опорные точки для точного задания размеров колонок. В остальных случаях можно ограничиться классами col и col-*.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

</div>

</div>

Из стопки в ряд

Используя классы col-sm-*, вы можете создать базовую сеточную систему, которая разместит блоки в виде стопки на телефонах, а затем будет выводить блоки в один ряд.

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

</div>

</div>

Смешиваем все классы

Можете комбинировать все классы, как вам нужно.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col col-md-8">.col .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

</div>

</div>

</div>

Вертикальное выравнивание

Flexbox дает два способа вертикального позиционирования колонок.

Выравниваем колонки внутри ряда относительно верха, середины, низа, если позволяет высота. Указываем у row классы flex-items-xs-start, flex-items-xs-center, flex-items-xs-end.

<div class="container">
  <div class="row align-items-start color_containter">
    <div class="col item">
      По верху
    </div>
    <div class="col item">
      По верху
    </div>
    <div class="col item">
      По верху
    </div>
  </div>
  <div class="row align-items-center color_containter">
    <div class="col item">
      По центру
    </div>
    <div class="col item">
      По центру
    </div>
    <div class="col item">
      По центру
    </div>
  </div>
  <div class="row align-items-end color_containter">
    <div class="col item">
      По низу
    </div>
    <div class="col item">
      По низу
    </div>
    <div class="col item">
      По низу
    </div>
  </div>
</div>

По верху

</div>

По верху

</div>

По верху

</div>

По центру

</div>

По центру

</div>

По центру

</div>

По низу

</div>

По низу

</div>

По низу

</div>

Также можно выровнять колонки внутри одного ряда относительно друг друга, если колонки будут использовать классы align-self-start, align-self-center, align-self-end.

<div class="container">
  <div class="row color_containter">
    <div class="col align-self-start item">
      One of three columns
    </div>
    <div class="col align-self-center item">
      One of three columns
    </div>
    <div class="col align-self-end item">
      One of three columns
    </div>
  </div>
</div>

One of three columns

</div>

One of three columns

</div>

One of three columns

</div>

Горизонтальное выравнивание

Создаём блоки, размер которых меньше 12 колонок. Дальше управляем их выравниванием из-за свободного места, указывая у ряда row классы justify-content-start, justify-content-center, justify-content-end. Также обратите внимание на классы justify-content-around, justify-content-between, которые окружают свободно место.

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      По левому краю
    </div>
    <div class="col-4">
      По левому краю
    </div>
  </div>
  
  <div class="row justify-content-center">
    <div class="col-4">
      По центру
    </div>
    <div class="col-4">
      По центру
    </div>
  </div>
  
  <div class="row justify-content-end">
    <div class="col-4">
      По правому краю
    </div>
    <div class="col-4">
      По правому краю
    </div>
  </div>
  
  <div class="row justify-content-around">
    <div class="col-4">
      Around
    </div>
    <div class="col-4">
      Around
    </div>
  </div>
  
  <div class="row justify-content-between">
    <div class="col-4">
      Between
    </div>
    <div class="col-4">
      Between
    </div>
  </div>
</div>

По левому краю

</div>

По левому краю

</div>

По центру

</div>

По центру

</div>

По правому краю

</div>

По правому краю

</div>

Around

</div>

Around

</div>

Between

</div>

Between

</div>

Промежутки

Используйте класс .no-gutters, чтобы убрать промежутки между блоками. Класс удаляет отрицательные margins из .row и горизонтальные padding из всех дочерних колонок.

Сортировка колонок

В обычной системе сеток, если нам необходимо поменять порядок колонок, нам нужно использовать push и pull.

Разработчики Bootstrap реализовали встроенное свойство flexbox order на основе трех классов сортировки, которые применим к колонкам col:

.flex-first – отображается первым
.flex-last – отображается последним
.flex-unordered – отображается между первым и последним

<div class="container">
  <div class="row">
    <div class="col flex-unordered">
      Первый, но не первый и не последний
    </div>
    <div class="col flex-last">
      Второй, но последний
    </div>
    <div class="col flex-first">
      Третий, но первый
    </div>
  </div>
</div>

Первый, но не первый и не последний

</div>

Второй, но последний

</div>

Третий, но первый

</div>

Смещение колонок

Для сдвига колонок вправо используйте .offset-md-*, которые увеличивают левый отступ на * колонок. Например, .offset-md-4 сдвигает на четыре колонки.

<div class="container">
  <div class="row">
    <div class="col-md-4 item">.col-md-4</div>
    <div class="col-md-4 offset-md-4 item">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3 item">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3 item">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
   <div class="col-md-6 offset-md-3 item">.col-md-6 .offset-md-3</div>
  </div>
</div>

<div class="col-md-4 offset-md-4 item">.col-md-4 .offset-md-4</div>

</div>

<div class="col-md-3 offset-md-3 item">.col-md-3 .offset-md-3</div>

</div>

<div class="col-md-6 offset-md-3 item">.col-md-6 .offset-md-3</div>

</div>

Заключение

Таким образом, используя класс row и классы столбцов, мы можем задать общее расположение элементов, а адаптивность bootstrap гарантирует, что на любых устройствах подобная сетка элементов будет выглядеть вполне нормально.

https://v4-alpha.getbootstrap.com/utilities/flexbox/
http://webmaster.alexanderklimov.ru/pagemaker/bootstrap/flexbox.php

1 2	https://v4-alpha.getbootstrap.com/utilities/flexbox/ http://webmaster.alexanderklimov.ru/pagemaker/bootstrap/flexbox.php