Расстановка отступов между кнопками в Bootstrap: примеры

Быстрый ответ

Чтобы создать горизонтальные отступы между кнопками в Bootstrap, используйте вспомогательные классы, например me-*. Вот пример его использования:

<button class="btn btn-primary me-2">Первая кнопка</button>
<button class="btn btn-secondary">Вторая кнопка</button>

Класс me-2 служит для создания отступа справа от первой кнопки размером 0,5 rem, что обеспечивает расстояние между ней и последующим элементом. Меняйте значение (2, 3, 4 и так далее), чтобы регулировать размер отступа. В Bootstrap 4 и более ранних версиях используйте mr-* для достижения этого же эффекта.

Работа с адаптивными отступами

Если вам нужен адаптивный дизайн, корректно отображающийся на разных устройствах, воспользуйтесь адаптивными классами Bootstrap. Так, класс me-sm-2 устанавливает отступы для устройств с маленькими экранами:

<button class="btn btn-primary me-sm-2">Первая кнопка для смартфонов</button>
<button class="btn btn-secondary">Вторая кнопка для смартфонов</button>

Отступ для последней кнопки

Когда вы работаете с группой кнопок, последней из них обычно не нужен правый отступ. Примените CSS-селектор :last-child, чтобы исключить последний элемент из общего правила:

.btn-toolbar .btn:not(:last-child) {
    margin-right: .5rem;
}

Обеспечение одинаковых отступов на всех размерах экранов

Для того чтобы отступы оставались одинаковыми на любых устройствах, используйте Bootstrap Grid System, устанавливая классы колонок наподобие col-xs-2. Класс btn-block позволяет растянуть кнопки на всю ширину контейнера:

<div class="row">
  <div class="col-xs-2">
    <button class="btn btn-primary btn-block">Первая кнопка в ряду</button>
  </div>
  <div class="col-xs-2">
    <button class="btn btn-secondary btn-block">Вторая кнопка в ряду</button>
  </div>
  <!-- Добавляйте кнопки в ряд, согласно потребности -->
</div>

Визуализация

Для наглядного сравнения приводятся кнопки без отступов и с отступами:

Без отступов:   [🔘🔘🔘]
С отступами:    [🔘]    [🔘]    [🔘]

Как и слова в тексте, кнопки для комфортного взаимодействия пользователя требуют достаточного пространства.

Использование групп кнопок и панелей инструментов Bootstrap

Для объединения функционально схожих кнопок используйте классы btn-group и btn-toolbar для создания структурированных и упорядоченных интерфейсов:

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2">
    <!-- Разместите здесь группы кнопок -->
  </div>
  <!-- Добавляйте дополнительные группы при необходимости -->
</div>

Стилизация кнопок с помощью классов Bootstrap

Важно не только функциональное, но и визуальное оформление кнопок. Стилизуйте их, применяя встроенные классы Bootstrap (btn-primary, btn-secondary и другие), чтобы они выглядели привлекательно:

<button class="btn btn-warning btn-lg">Осторожно! 🟡</button>

Не забывайте, что Bootstrap поддерживает использование глифов для более прозрачного интерфейса.

Единообразный дизайн с помощью утилит Bootstrap

В Bootstrap предусмотрены утилиты для управления отступами, которые помогают добиваться единообразия и поддерживаемости ваших проектов, сокращая необходимость написания дополнительного CSS:

<button class="btn btn-primary me-lg-2">Продуманное распределение...</button>

Тестирование отзывчивости макета

Перед завершением работы над проектом, обязательно проведите проверку отступов кнопок на различных устройствах, чтобы быть уверенными в их корректном отображении. Воспользуйтесь помощью коллеги или друга — дополнительное мнение всегда способствует улучшению результата.