В Bootstrap есть встроенная система сеток, которая позволяет создавать адаптивные колонки. Однако, по умолчанию между колонками нет отступов, и поэтому возникает потребность в добавлении отступов для более эстетического вида.
Существует несколько способов добавить отступы между колонками в Bootstrap.
1. Использование класса "gutter" в контейнере или родительском элементе:
Начиная с версии Bootstrap 4, можно добавить класс "gutter" к контейнеру или родительскому элементу, чтобы создать отступы между колонками. Класс "gutter" добавляет отступы с помощью свойства padding и через переменные Sass можно настроить их величину. Например:
<div class="container gutter">
<div class="row">
<div class="col">Колонка 1</div>
<div class="col">Колонка 2</div>
</div>
</div>
2. Использование пользовательских стилей:
Можно также добавить отступы между колонками, используя пользовательские стили. Для этого можно использовать классы CSS или формировать стили с помощью препроцессоров, например, Sass или Less. Например:
<style>
.column {
margin-bottom: 15px;
}
@media (min-width: 992px) {
.column {
margin-bottom: 30px;
}
}
</style>
<div class="container">
<div class="row">
<div class="col column">Колонка 1</div>
<div class="col column">Колонка 2</div>
</div>
</div>
В данном примере мы добавляем отступы между колонками с помощью класса "column". При использовании медиа-запросов, отступы меняются в зависимости от ширины экрана.
3. Использование встроенных классов Bootstrap:
Bootstrap также предоставляет некоторые встроенные классы, которые позволяют добавлять отступы между колонками. Например, классы "mb-3" и "mb-lg-4" добавляют отступы снизу (margin-bottom) между колонками.
<div class="container">
<div class="row">
<div class="col mb-3">Колонка 1</div>
<div class="col mb-3">Колонка 2</div>
</div>
</div>
В этом примере мы добавляем отступы снизу (3) между колонками на всех устройствах. Можно использовать классы адаптивности, такие как "mb-lg-4", чтобы задать разные отступы для разных разрешений экрана.
В зависимости от требуемых отступов и дизайна, можно комбинировать эти способы или использовать другие пользовательские стили для достижения необходимого вида отступов между колонками Bootstrap.