Для того чтобы сделать колонки на md экранах растягивающимися на всю ширину страницы, мы можем использовать систему сетки Bootstrap и добавить несколько классов к нашим колонкам.
1. Начнем с установки Bootstrap, либо с использования CDN ссылки на CSS файл Bootstrap внутри тэга head вашего HTML документа.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
2. Внутри вашего HTML документа создайте контейнер, в котором будет размещаться ваша сетка.
<div class="container">
<div class="row">
<div class="col-md-12">Col 1</div>
<div class="col-md-12">Col 2</div>
<div class="col-md-12">Col 3</div>
</div>
</div>
Здесь мы создали контейнер с классом "container" и добавили внутри него строку с классом "row". Внутри строки мы создали три колонки, каждая из которых имеет класс "col-md-12". Класс "col-md-12" говорит Bootstrap, что каждая колонка должна занимать 12 колонок из 12 в сетке на экранах с разрешением md (medium).
3. Чтобы обеспечить растяжку колонок на всю ширину страницы на md экранах, нам необходимо использовать один из классов на выбор: "col-12", "col-sm-12", "col-md-12", "col-lg-12" или "col-xl-12". Различия между этими классами заключаются в том, при каком размере экрана (xs, sm, md, lg или xl) колонка будет занимать 12 колонок в сетке.
Например, если вы хотите, чтобы колонки занимали всю ширину страницы на всех экранах, включая md, то вы можете добавить классы "col-12" и "col-md-12":
<div class="container">
<div class="row">
<div class="col-12 col-md-12">Col 1</div>
<div class="col-12 col-md-12">Col 2</div>
<div class="col-12 col-md-12">Col 3</div>
</div>
</div>
Теперь колонки будут занимать всю ширину страницы на экранах всех размеров и на md экранах.
4. Если у вас уже есть стили, которые переопределяют стили Bootstrap, то вы можете создать свой собственный класс и добавить его к вашим колонкам для растяжки.
<div class="container">
<div class="row">
<div class="col-12 stretched-column">Col 1</div>
<div class="col-12 stretched-column">Col 2</div>
<div class="col-12 stretched-column">Col 3</div>
</div>
</div>
Здесь мы добавили класс "stretched-column" к нашим колонкам, и вы должны определить этот класс в вашем собственном CSS файле:
.stretched-column {
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}
Этот CSS код растянет каждую колонку на всю ширину страницы, удаляя любые отступы справа и слева.
Вот и все! Теперь вы знаете, как сделать колонки на md экранах располагающимися на всю ширину страницы с использованием Bootstrap.