В Bootstrap 5 можно достичь 100% ширины для двух блоков в одном ряду в мобильной версии с помощью системы сеток (grid system). Система сеток Bootstrap позволяет размещать элементы на странице в определенных колонках и рядов.
Для создания такой разметки, вам понадобится следующий код:
<div class="container">
<div class="row">
<div class="col-sm-6">Блок 1</div>
<div class="col-sm-6">Блок 2</div>
</div>
</div>
В данном примере, используется контейнер (container) для ограничения ширины контента по центру экрана. Внутри контейнера, создается ряд (row), который будет содержать блоки.
Далее, каждый блок обрамляется в колонку (col-sm-6), где col-sm-6 указывает, что блок будет занимать половину ширины ряда на устройствах с шириной экрана sm (мобильные устройства).
Таким образом, оба блока будут занимать 100% ширины экрана в мобильной версии, размещаясь друг за другом.
Если вы хотите, чтобы блоки были одинаковой ширины независимо от размера экрана, вы можете использовать класс col-6 вместо col-sm-6. Это гарантирует, что блоки будут занимать половину ширины ряда на всех устройствах.
<div class="container">
<div class="row">
<div class="col-6">Блок 1</div>
<div class="col-6">Блок 2</div>
</div>
</div>
Теперь оба блока будут занимать одинаковую ширину и на мобильных устройствах, и на десктопах.
Надеюсь, это помогло вам понять, как сделать 100% ширину для двух блоков в одном ряду в мобильной версии с помощью Bootstrap 5.