Отступы
Отступы между столбцами используются для гибкого размещения и выравнивания содержимого в системе сеток Bootstrap.
Как это работает
Горизонтальные отступы между столбцами с использованием
padding. Мы устанавливаемpadding-rightиpadding-leftдля каждого столбца и используем отрицательное значениеmarginдля смещения в начале и конце каждой строки для выравнивания содержимого.Начало отступа шириной в
1.5rem(24px). Это позволяет нам сопоставить нашу сетку с масштабом отступов и интервалов полей.Отступы могут быть быстро отрегулированы. Используйте специфичные для контрольной точки классы отступов для изменения горизонтальных, вертикальных и сразу всех отступов.
Горизонтальные отступы
Классы .gx-* могут использоваться для контроля горизонтальной ширины отступа. Родительские элементы .container или .container-fluid возможно тоже потребуется отрегулировать, если использовать более крупные отступы, чтобы избежать нежелательного переполнения. Например, в следующем примере мы увеличили заполнение с помощью .px-4:
<divclass="container px-4"><divclass="row gx-5"><divclass="col"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div><divclass="col"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div></div></div>Альтернативное решение - добавить оболочку вокруг .row с помощью класса .overflow-hidden:
<divclass="container overflow-hidden"><divclass="row gx-5"><divclass="col"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div><divclass="col"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div></div></div>Вертикальные отступы
Классы .gy-* могут использоваться для контроля ширины вертикального отступа. Как и горизонтальные отступы, вертикальные отступы могут вызвать переполнение ниже .row в конце страницы. Если это происходит, вы добавляете оболочку вокруг .row с классом .overflow-hidden:
<divclass="container overflow-hidden"><divclass="row gy-5"><divclass="col-6"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div><divclass="col-6"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div><divclass="col-6"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div><divclass="col-6"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div></div></div>Горизонтальные и вертикальные отступы
Классы .g-* могут использоваться для управления горизонтальнной шириной отступа. В следующем примере мы используем меньшую ширину отступа, поэтому добавление класса оболочки .overflow-hidden не требуется.
<divclass="container"><divclass="row g-2"><divclass="col-6"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div><divclass="col-6"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div><divclass="col-6"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div><divclass="col-6"><divclass="p-3 border bg-light">Пользовательские внутренние отступы колонок</div></div></div></div>Ряды столбцов с отступами
Классы отступов также могут быть добавлены в столбцы строк. В следующем примере мы используем отзывчивые столбцы строк и классы адаптивного отступа.
<divclass="container"><divclass="row row-cols-2 row-cols-lg-5 g-2 g-lg-3"><divclass="col"><divclass="p-3 border bg-light">Колонка ряда</div></div><divclass="col"><divclass="p-3 border bg-light">Колонка ряда</div></div><divclass="col"><divclass="p-3 border bg-light">Колонка ряда</div></div><divclass="col"><divclass="p-3 border bg-light">Колонка ряда</div></div><divclass="col"><divclass="p-3 border bg-light">Колонка ряда</div></div><divclass="col"><divclass="p-3 border bg-light">Колонка ряда</div></div><divclass="col"><divclass="p-3 border bg-light">Колонка ряда</div></div><divclass="col"><divclass="p-3 border bg-light">Колонка ряда</div></div><divclass="col"><divclass="p-3 border bg-light">Колонка ряда</div></div><divclass="col"><divclass="p-3 border bg-light">Колонка ряда</div></div></div></div>Без промежутков между столбцами
Промежутки между столбцами в наших предопределенных классах сетки могут быть удалены с помощью .g-0. С помощью этого класса можно удалить отрицательные margin из .row и горизонтальные padding из всех непосредственных дочерних столбцов.
Если нужно разместить элементы дизайна от края до края, то удалите родительский .container или .container-fluid.
Обратите внимание, что эти классы вы можете также использовать и со всеми другими предопределенными классами сетки (включая ширину столбцов, уровни реагирования, переупорядочения и т.д.). Так это выглядит на практике:
<divclass="row g-0"><divclass="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div><divclass="col-6 col-md-4">.col-6 .col-md-4</div></div>Изменение параметров отступов
Классы создаются из Sass карты $gutters, которая унаследована от Sass карты $spacers.
$grid-gutter-width:1.5rem;$gutters:(0:0,1:$spacer*.25,2:$spacer*.5,3:$spacer,4:$spacer*1.5,5:$spacer*3,);