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

Метод 1: использование полей

.modal-footer button {
  margin-right: 10px;
}

Этот код CSS добавляет поле в 10 пикселей с правой стороны каждой кнопки в модальном нижнем колонтитуле. Отрегулируйте значение пикселя в соответствии с желаемым расстоянием.

Метод 2: использование Flexbox

.modal-footer {
  display: flex;
  justify-content: space-between;
}
.modal-footer button {
  margin-right: 10px;
}

Если применить макет flexbox к модальному контейнеру нижнего колонтитула и установить для свойства justify-contentзначение space-between, кнопки в нижнем колонтитуле будут автоматически располагаться равномерно. Свойство margin-rightпо-прежнему можно использовать для добавления дополнительного расстояния между кнопками, если это необходимо.

Метод 3. Сетка

.modal-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

При использовании сетки CSS модальный нижний колонтитул делится на столбцы одинаковой ширины с помощью свойства grid-template-columns. Значение repeat(auto-fit, minmax(100px, 1fr))гарантирует, что столбцы будут соответствовать доступному пространству. Свойство gapдобавляет расстояние между кнопками в 10 пикселей.

Метод 4: Bootstrap Framework

<div class="modal-footer">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
</div>

Если вы используете платформу Bootstrap, вы можете использовать ее предопределенные классы для определения расстояния между кнопками в модальных нижних колонтитулах. Добавив к кнопкам классы btnи btn-primary, Bootstrap будет автоматически регулировать расстояние за вас.

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