Как в bootstrap 5 настроить 100% ширину для двух блоков в одной строке на мобильных устройствах?

Каким образом я могу сделать так, чтобы блоки занимали всю ширину на мобильных экранах и половину ширины на ПК?
  • 8 ноября 2023 г. 16:10
Ответы на вопрос 1
Для достижения такого эффекта в Bootstrap 5 вы можете использовать классы "col" с различными значениями ширины в зависимости от размера экрана.

Пример кода для достижения вашего требования:

```html
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6">Блок 1</div>
    <div class="col-sm-12 col-md-6">Блок 2</div>
  </div>
</div>
```

В данном примере блоки "Блок 1" и "Блок 2" будут занимать полную ширину на мобильных экранах и половину ширины на ПК.

Классы "col-sm-12" указывают, что блоки будут занимать 100% ширины на мобильных устройствах. Классы "col-md-6" указывают, что блоки будут занимать половину ширины на ПК.

Обратите внимание на использование класса "container" для обертки и класса "row" для создания строки. Эти классы являются частью сетки Bootstrap и необходимы для корректного выравнивания блоков.

Вы также можете использовать другие классы разделения ширины, такие как "col-lg-4" или "col-xl-3", чтобы настроить размеры блоков на более крупных устройствах с широкими экранами.
Похожие вопросы