Может быть проще думать о вещах в обратном порядке: переходя от маленьких экранов к большим.Это проверенный рабочий процесс (конечно, есть исключения) для разработки и реализации конструкций экрана, которые должны работать на мобильных устройствах с разрешением до рабочего стола.
Этот обзор может быть полезен: https://zellwk.com/blog/how-to-write-mobile-first-css/
По умолчанию тег body будет заполнять доступную ширину окна, если она не ограничена (возможно, вы захотите добавить margin: 0 к элементу body, чтобы гарантировать отсутствие зазоров по краям).Внутри вашего тега body я бы порекомендовал заключить весь ваш контент в тег main (если это не запрещено вашим домашним заданием).main является элементом уровня блока и будет растягиваться, чтобы заполнить все доступное горизонтальное пространство его родителя (в этой базе, элемент body).
Итак, вы получаете мобильный ("переключен")) вид растяжения до краев в основном бесплатно.Он работает "из коробки".
Non-Bootstrap
На экранах большего размера (например, на рабочих столах) вы захотите ограничить ширину main элемент с объявлением max-width (с помощью медиазапроса ) и установите для его правого и левого полей значение auto.Это будет горизонтально центрировать элемент main.
В его самой основной форме это будет выглядеть примерно так:
@media screen and (min-width: 1200px) {
main {
max-width: 1024px;
margin-right: auto;
margin-left: auto;
}
}
Разбивка (не Bootstrap)
Здесь мы говорим, что при любой ширине окна, равной или превышающей 1200px, мы хотим применить правило CSS, которое ограничивает максимальную ширину main, равную 1024px.,(Я просто вытаскиваю эти ценности из шапки; смело меняйте их в соответствии с вашими потребностями).И мы хотим, чтобы он был центрирован в области просмотра, поэтому мы скажем левому и правому краям автоматически расширяться внутрь от правого и левого краев, пока они не достигнут элемента main.
Bootstrap
Похоже, вы используете Bootstrap 4.0.0, поэтому у вас есть доступ к сеточной системе Bootstrap на базе flexbox.С помощью служебных классов BS выполнение этого макета может быть сделано довольно легко.Как вы решите это сделать, будет зависеть от того, как вы настроили Bootstrap (и как вы решите использовать Bootstrap), но из коробки вы можете сделать что-то простое:
<body>
<main class="container-fluid">
<div class="row justify-content-lg-center">
<div class="col-12 col-lg-8">
<!-- content -->
</div>
</div>
</main>
</body>
Разрушение (Bootstrap)
container-fluid создает элемент контейнера, ширина которого всегда равна 100%.Это означает, что при меньшей ширине окна (например, на телефонах) ваш контент будет заполнять всю ширину области просмотра.row применяет некоторые базовые родительские стили flex-box, которые можно дополнительно настроить, установив для его свойства justify-content значение center при «больших» (lg) значениях ширины окна (с помощью служебного класса BS:justify-content-lg-center). - Поскольку BS по умолчанию использует сетку из 12 столбцов, установка
col-12 для дочернего элемента row означает, что он будет растягиваться до 100% ширины родительского элемента.При больших размерах экрана приведенный выше код говорит, что элемент должен растягиваться только на 8/12 (или 2/3) горизонтальных размеров родительского элемента (т. Е. col-lg-8).Поскольку мы указали элементу row центрировать его flex-child по ширине окна lg, этот макет будет отцентрирован по горизонтали.
На основе ваших снимков экрана не похоже, что вы хотитечтобы ограничить ширину вашего header (но я не увидел элемент header в вашей разметке).Так что это должно быть обработано немного по-другому.
Что касается вашего конкретного вопроса, существует множество способов выполнить этот макет с помощью Bootstrap (или без него), но, возможно, приведенное выше поможет вам начать.