Bootstrap - это фреймворк для разработки веб-приложений, который обеспечивает готовые компоненты и стилевую сетку для создания адаптивного и кросс-браузерного интерфейса. Один из его ключевых элементов - это гибкая сетка, которая позволяет легко управлять шириной колонок.
Для задания каждой колонке ширину 100% в Bootstrap, мы можем использовать классы "col" и "col-12". Класс "col" представляет собой базовую колонку, а класс "col-12" указывает на то, что колонка должна занимать все доступное пространство на экране.
Давайте рассмотрим небольшой пример:
<div class="container">
<div class="row">
<div class="col-12">Колонка 1</div>
<div class="col-12">Колонка 2</div>
<div class="col-12">Колонка 3</div>
</div>
</div>
В этом примере у нас есть контейнер и ряд, в котором размещены три колонки. Класс "col-12" присвоен каждой из них, что означает, что каждая колонка будет занимать все доступное пространство на экране.
Когда вы запустите этот код, каждая колонка будет занимать всю ширину родительского контейнера, причем все колонки будут иметь одинаковую ширину.
Однако, следует отметить, что в Bootstrap сетка разделена на 12 колонок по умолчанию, и вы можете задать ширину колонки в процентах, используя классы "col-1" до "col-12". Например, класс "col-6" будет задавать ширину колонки 50% от родительского контейнера.
Итак, чтобы задать каждой колонке свою индивидуальную ширину, достаточно просто изменить значение класса на нужное значение, например, "col-6", "col-4" и т.д., в зависимости от того, какую ширину вы хотите установить для каждой колонки.
<div class="container">
<div class="row">
<div class="col-6">Колонка 1 (50%)</div>
<div class="col-4">Колонка 2 (33.33%)</div>
<div class="col-2">Колонка 3 (16.66%)</div>
</div>
</div>
В этом примере первая колонка будет занимать 50% ширины родительского контейнера, вторая - 33.33%, а третья - 16.66%. Общая ширина всех колонок равна 100%.
Надеюсь, это подробное объяснение поможет вам задать каждой колонке в Bootstrap ширину 100% или индивидуальную ширину в процентах.