Создание отступа между кнопками в Bootstrap: способы

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

Для создания пространства между кнопками применяются отступы в CSS:

<button style="margin-right: 10px;">Кнопка 1</button>
<button>Кнопка 2</button>

Или используется свойство flexbox gap — это тоже элегантное решение:

<div style="display: flex; gap: 10px;">
  <button>Кнопка 1</button>
  <button>Кнопка 2</button> <!-- Теперь пространства на зависть! -->
</div>

Добавление отступов с помощью Bootstrap

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

<button class="btn mx-2">Кнопка 1</button>
<button class="btn">Кнопка 2</button> <!-- Нужен пробел? Используйте класс Bootstrap! -->

При этом не забывайте применять Bootstrap контейнеры, такие как btn-toolbar для равномерного распределения пространства между кнопками:

<div class="btn-toolbar" role="toolbar">
  <button class="btn btn-primary mr-2">Кнопка 1</button> <!-- Главенствующая позиция! -->
  <button class="btn btn-secondary">Кнопка 2</button> <!-- Не забывайте и об этой кнопке... -->
</div>

Имейте в виду, что класс btn-group не подходит для создания значительного пробела между элементами.

Отступы кнопок для адаптивного дизайна

Адаптивность кнопок легко обеспечивается через сеточную систему Bootstrap:

<div class="form-group">
  <div class="row">
    <div class="col-md-6">
      <button class="btn btn-primary w-100">Кнопка 1</button>
    </div>
    <div class="col-md-6">
      <button class="btn btn-secondary w-100">Кнопка 2</button> <!-- Воля пространству! -->
    </div>
  </div>
</div>

Так, класс col-md-6 гарантирует равное распределение пространства для кнопок, оно адаптируется к экрану устройства.

Применение flexbox для гибких отступов

Flexbox позволяет контролировать пространство не завися от Bootstrap:

<div style="display: flex; justify-content: space-around;">
  <button>Кнопка 1</button>
  <button>Кнопка 2</button> <!-- Какая свобода в размещении! -->
</div>

Для удобства и большей семантики используйте свои CSS-классы:

<style>
  .btn-space { margin-right: 15px; } /* Мне важен личный простор! */
</style>

<button class="btn-space">Кнопка 1</button>
<button>Кнопка 2</button>

Стилизация кнопок в контексте форм

При работе с формами сочетайте 'form-control' классы с 'btn' классами для гармоничной настройки кнопок и добавления необходимых отступов:

<form>
  <input type="text" class="form-control mb-2">
  <button class="btn btn-primary">Отправить</button> <!-- Как приятно отправлять формы! -->
  <button class="btn btn-secondary ml-2">Отменить</button> <!-- Да и эта кнопка дорогого стоит. -->
</form>

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

Позиционирование ваших кнопок может напоминать регулярно расставленные парковочные места:

До добавления пробелов: 🅿️🚗🚗🅿️

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

После добавления пробелов: 🅿️🚗⬜🚗🅿️

Добавление отступов между кнопками позволяет создать раздельное пространство, дает "воздуха" и делает доступ к ним удобнее.

Расположение и выравнивание кнопок

Чтобы присвоить кнопке уникальный стиль или функционал через JavaScript, используйте атрибут id:

<button id="button1">Кнопка 1</button> <!-- Я непохожа на других! -->

В Bootstrap для выравнивания элементов внутри flex-контейнеров применяют вспомогательные классы, например ml-auto:

<div class="d-flex">
  <button class="ml-auto">Кнопка справа</button> <!-- Не всегда я права, но... -->
</div>

Полезные материалы

1. CSS Margin — изучите свойства CSS отступов, чтобы со знанием дела создавать пространство между элементами.
2. Полное руководство по Flexbox на CSS-Tricks — Flexbox сочетает в себе гибкость элементов и пространственную гибкость, что позволяет достичь впечатляющего результата в макетировании.
3. Введение в базовую модель блока CSS на MDN — познайте модель блока, чтобы осознать значение padding и margin.
4. display – CSS: каскадные таблицы стилей на MDN — уясните, как значения display влияют на распределение и компоновку HTML-элементов.
5. CSS Buttons — прочтите руководство по стилизации кнопок при помощи CSS.
6. Полное руководство по CSS Grid на CSS-Tricks — овладейте сеточной системой CSS для управления пространством.
7. <button>: Элемент Button в HTML на MDN — узнайте больше о HTML кнопках и как их использовать.