Как в бутстрапе сделать контейнер в контейнере или такой отступ?

Question

[lolrofl01]

Смотрю макет, а там почему-то не 12, а 14 колонок. Скрин тут: prntscr.com/kyxrbf . Сам сайт имеет boxed вид, т.е. не на всю ширину, а лежит в контейнере. Его я на скрине выделил красным. Далее с обеих сторон желтым я выделил те самые отступы, которые не знаю как реализовать. Они равны ширине одной колонки, но вместе с ними получается не 12, а 14 колонок. Значит это не колонки, а лишь отступы равные колонкам. Вот как сделать такой отступ? Контейнер в контейнере отказывается работать, а какой-нибудь маргин или паддинг не уверен, что получится такого же размера как и ширина 1 колонки. Как вообще делаются такие отступы и правильно ли сделал дизайнер?

Comments

[Ruslan Ruslanov]

на том сайте f12 или пкм по элементу->исследовать элемент. смотришь как реализовано.
а по теме: flex css.

Answer 1

[Sly04]

Самое простое - это сделать 14 колонок и следовать макету, нежели выдумывать различные отступы.

Answer 2

[qviktor]

Дружище, была похожая ситуация.
Не стал долго разбираться, сделал контейнер в контейнере. Первый контейнер был флюидом с фоном, а во втором контент. Количество колонок - тоже не проблема, мне часто прилетают заказы с 16-18-20 колонками.

На сайте бутстрапа есть компилятор, там можно вбить количество колонок и сохранить перекомпилированный бутстрап

Answer 3

[Сергей delphinpro]

Не в ту сторону смотрите скорее всего.
Во-первых, эти отступы актуальны только на больших экранах
Во-вторых, вряд ли принципиально то, что они равны ширине колонки.

Просто сделайте свой кастомный контейнер с фиксированными паддингами, пикселей 70-80.

.my-container {
  max-width: 1300px;
  margin: auto;

  @include media-breakpoint-up(xl){
    padding: 0 80px;
  }
}