Растягивание кнопки на всю ширину колонки в HTML/CSS

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

Для того чтобы кнопка занимала всю доступную ширину, нужно задать её свойство width в CSS как 100%.

button {
  width: 100%;
  display: block; /* Как бы нам хотелось `display: упражнение "жим-лежа"`, но пока что подойдет `block` */
  box-sizing: border-box; /* Это удобно, как когда все вещи влезают в чемодан */
}

Пример внедрения этого кода CSS:

<button>Кнопка на всю ширину</button>

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

Bootstrap: расширяем кнопку с элегантностью

Bootstrap предлагает удобный метод, позволяющий сделать кнопку по ширине всей колонки. Для версий Bootstrap v3 & v4 добавьте к классам .btn-block:

<button class="btn btn-primary btn-block">Кнопка на всю ширину</button>

В Bootstrap v2 следует использовать .input-block-level:

<button class="input-block-level">Кнопка на всю ширину</button>

Для Bootstrap 5.1, где класс .btn-block был убран, подойдет .w-100:

<button class="btn btn-primary w-100">Кнопка на всю ширину</button>

И если вы работаете с формами, класс .form-control также поможет сделать элементы одинаковой ширины:

<button class="form-control">Кнопка на всю ширину</button>

Сеточная разметка и отзывчивость: обходимся с различными размерами экрана

Если использовать класс .col-12, кнопка займет всю ширину колонки:

<div class="row">
  <div class="col-12">
    <button class="btn btn-primary w-100">Кнопка на всю ширину</button>
  </div>
</div>

А с .col-md-12 можно адаптировать кнопку под средние устройства:

<div class="row">
  <div class="col-md-12">
    <button class="btn btn-primary w-100">Кнопка на всю ширину</button>
  </div>
</div>

Не забывайте подключать Bootstrap CSS, чтобы классы стилизации сработали.

Нет Bootstrap? Нет проблем: чистый CSS

В отсутствие Bootstrap вы можете применить инлайн-стили для получения такого же эффекта:

<button style="width: 100%;">Кнопка на всю ширину</button>

Однако лучше использовать классы для повышения наглядности кода:

.full-width-button {
  width: 100%;
  display: block; /* Мечта о `display: тако` остается невыполненной */
  box-sizing: border-box; /* Мы контролируем границы и отступы, словно кошки на поводке */
}

Просто добавьте кнопке новый класс:

<button class="full-width-button">Кнопка на всю ширину</button>

Для адаптивного дизайна внутри сетки можно использовать классы, например, .col-md-4 и .col-12.

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

Можно представить экран как холст, а кнопку — как эластичную ленту:

До расширения:    | Кнопка |
                  |        |
Экран (холст):    |------------------|

Применим width: 100% и получим:

button {
    width: 100%; /* Теперь кнопка используется по полной мощности */
}

В результате кнопка занимает всю ширину:

После расширения: |------------------|
                   |   На всю ширину  |
Экран (холст):     |------------------|

Благодаря небольшому кусочку CSS, ваша кнопка теперь охватывает широкий экран!

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

1. Полное руководство по Flexbox | CSS-Tricks – освойте возможности Flexbox для создания гибких макетов.
2. box-sizing – CSS: Cascading Style Sheets | MDN – подробная информация о box-sizing и его влиянии на ширину элементов.
3. Дизайн адаптивной круговой диаграммы с CSS и SVG — Smashing Magazine – улучшение отзывчивости ваших дизайнов с использованием SVG и CSS.
4. Стратегии стилизации модальных окон | CSS-Tricks – лучшие практики стилизации модальных окон.
5. Использование переменных CSS — MDN – преимущества использования переменных CSS для улучшения масштабируемости и управляемости.
6. Свойство width в CSS – руководство по использованию width для создания элементов на всю ширину.