Адаптивная верстка макета шириной 1600px, используя bootstrap. Как быть с размерами?

Question

[Itvanya]

Ребята, привет. Получил задачу, с которой ранее не встречался. Скажу сразу, что верстал в основном макеты шириной в 960-1000px. На данный момент предстоит задача заверстать макет шириной 1600px(получил макет именно такой ширины от дизайнера), во всю ширину которого растянута картинка, а основное содержимое - это контейнер шириной 1380px. Очевидно, что во wrapper положить картинку, а в него уже положить контент блок, давая ему центрирование. Проблема в том, как это сделать адаптивно, используя bootstrap. Bootstrap-контейнер имеет ширину 1170px, а container-fluid ширину 100%. То есть верстать, используя относительные единицы уже не получится, так как основное содержимое - это блок с какой-то заданной шириной, а вокруг него картинка, тянущаяся до 1600px+. Такие же макеты до ширины, не превышающие ширину моего экрана, верстаю без проблем, а тут какой-то ступор.
Спасибо за ответ. С прошедшими и наступающими праздниками!

Answer 1

[Сергей Кузнецов]

Присоединяюсь к предыдущему Сергею..)
Более конкретно: идёшь по ссылке: getbootstrap.com/customize/#container-sizes
Задаешь нужные тебе размеры: вместо 1140+30 (30 - это межколонник, кстати который ты тоже можешь изменить чуть выше на странице) вводишь соответсвенно 1570px (это как раз 1600px-30px).
Далее внизу страницы нажимаешь СКОМПИЛИРОВАТЬ И СКАЧАТЬ. Получаешь нужную тебе сетку бутстрапа. Переименовываешь её например в bootstrap1600.css и используешь для своего сайта. Всё!

Comments

[Itvanya]

Спасибо. Практически именно так и сделал!

[Сергей Кузнецов]

Itvanya: Успехов!

[Itvanya]

Сергей Кузнецов: Спасибо! И тебе!)

Answer 2

[noname1]

Держи!

@media (min-width: 1300px) {
.container {
    width: 1240px;
}
}
@media (min-width: 1400px) {
.container {
    width: 1340px;
}
}
@media (min-width: 1500px) {
.container {
    width: 1440px;
}
}
@media (min-width: 1720px) {
.container {
    width: 1600px;
}
}

Answer 3

[gassmonkey]

Оберни .container враппером с фоном-картинкой. В чём проблема?
А вообще, советую пока отказаться от бутстрапа, если ты без него такую элементарщину реализовать не можешь.

Comments

[Itvanya]

Зачем ты ответил ровно тем, что я написал? Не проблема в картинке и обертке, проблема в том, что на том же ноутбуке при ширине основного содержимого в 1380px появляется горизонтальный сколл-бар. Неужели нужно ставить breakpoints выше 1280px, куда бутстрап еще не залез.

[gassmonkey]

Itvanya: Ширину враппера в 1600 указывать не нужно. Его ширина всегда 100%.

[Itvanya]

gassmonkey: Я знаю! Сейчас идет разговор про ширину контента, учитывая, что он 1380px. Я уже нашел решение с использованием бутстрап 4, где .container можно редактировать, просто меняя переменные в sass

[gassmonkey]

Itvanya: Ну так и писали бы по сути, что нужно размер контейнера изменить. Это и в третьем прекрасно делается - getbootstrap.com/customize/.