Ограничить ширину содержимого fluid контейнера?

Question

[Михаил]

Всем привет!
Интересует такой вопрос.
Надо сверстать обычный футер.
Ширина фона футера 100%. А содержимое ограничено 1200 px.
Используем Bootstrap.
Как правильно сделать?
Сделать container-fluid , и ограничивать ширину . row внутри контейнера? И внутри . row делать колонки.
Или сделать section, которая будет на 100%, а внутри сделать container шириной 1200px?
Или какие ещё варианты есть для этого?

Answer 1

[Антон Литвиненко]

<footer class="page-footer">
	<div class="container">
		Content
	</div>
</footer>

.page-footer {
	background-color: teal;
}

Answer 2

[Lord_Dantes]

Что значит ограничивать ширину? Контент не будет выходить за ширину контейнера если вы используете бутстрап.

Или используйте max-width: 1200px;

Comments

[Михаил]

надо ограничить ширину контента внутри контейнера.
т.е. сам контейнер должен быть на всю ширину экрана, а содержимое контейнера должно быть ограничено 1200 px. (см.рис)
при этом ширина самого контейнера футера на всю ширину страницы, т.е. черный фон растянут на всю ширину

[Lord_Dantes]

Михаил, так сделайте. Я же упомянул свойство max-width

Answer 3

[ReActor Дмитрий Вершанский]

Один из многочисленных возможных вариантов:

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-auto"></div>
        </div>
    </div>
</div>

Comments

[Михаил]

что правда? вы серьёзно ?
контейнер в контейнер ?

[ReActor Дмитрий Вершанский]

Михаил, в данном случае, элемент с классом container, кастомизируется вами лично, а не является зависимым и причастным к bootstrap-библиотеке. (Если вы об этом)

[ReActor Дмитрий Вершанский]

Михаил, тем более, что в ваших входных данных, при постановке вопроса, была озвучена фиксированная ширина в 1200 px для контент-контейнера. Именуйте класс, как вашей душе угодно и вперёд в css. Причастный к bootstrap container, обладает динамическим поведением по части параметра width, что в Вашем случае не является верным решением.

[Михаил]

ну не знаю
попробуем так
спасибо
просто не знаю, можно ли вкладывать контейнер в контейнер

[ReActor Дмитрий Вершанский]

Михаил, Почему вас смущает БАЗОВЫЙ принцип построения DOM, в рамках html-документа?! Элементы вкладываются в друг друга, образуя связи на уровне "родительских", "дочерних" и "сестринских". И ничего страшного в этом нет)

Вы не поняли суть решения, предложенного мною. Берите библиотечный div с классом container-fluid, он будет выступать, в качестве внешнего, имеющего width: 100vw; которому Вы присвоите backgroud-image. А вот в качестве ограничиваюшего контент-контейнера с шириной в 1200px, используйте div, со свободным именем класса.

[Антон Литвиненко]

Вкладывать можно, но не нужно.
Не забывайте, что у контейнеров паддинги по 15 пикселей.
И так вы получите лишние паддинги

[ReActor Дмитрий Вершанский]

Михаил, по-хорошему, раз уж на то пошло, то контент-контейнер в 1200 px - он един, для всех (ну или для львиной доли) блоков страницы/сайта. Для того, чтобы не мудрить для каждой секции эту ситуацию, создайте элемент, к примеру, с классом "wrapp", определив ему нужное значение width. Затем "тяните" этот класс, присваивая его нужным элементам, в нужных местах.

[Михаил]

Re{Actor}, понял Вас
принял
как вариант годится
спасибо!