Задать вопрос

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

Ребята, привет. Получил задачу, с которой ранее не встречался. Скажу сразу, что верстал в основном макеты шириной в 960-1000px. На данный момент предстоит задача заверстать макет шириной 1600px(получил макет именно такой ширины от дизайнера), во всю ширину которого растянута картинка, а основное содержимое - это контейнер шириной 1380px. Очевидно, что во wrapper положить картинку, а в него уже положить контент блок, давая ему центрирование. Проблема в том, как это сделать адаптивно, используя bootstrap. Bootstrap-контейнер имеет ширину 1170px, а container-fluid ширину 100%. То есть верстать, используя относительные единицы уже не получится, так как основное содержимое - это блок с какой-то заданной шириной, а вокруг него картинка, тянущаяся до 1600px+. Такие же макеты до ширины, не превышающие ширину моего экрана, верстаю без проблем, а тут какой-то ступор.
Спасибо за ответ. С прошедшими и наступающими праздниками!
  • Вопрос задан
  • 6855 просмотров
Подписаться 3 Оценить Комментировать
Решения вопроса 1
CheapThailand
@CheapThailand
учусь путешествовать
Присоединяюсь к предыдущему Сергею..)
Более конкретно: идёшь по ссылке: getbootstrap.com/customize/#container-sizes
Задаешь нужные тебе размеры: вместо 1140+30 (30 - это межколонник, кстати который ты тоже можешь изменить чуть выше на странице) вводишь соответсвенно 1570px (это как раз 1600px-30px).
Далее внизу страницы нажимаешь СКОМПИЛИРОВАТЬ И СКАЧАТЬ. Получаешь нужную тебе сетку бутстрапа. Переименовываешь её например в bootstrap1600.css и используешь для своего сайта. Всё!
Ответ написан
Пригласить эксперта
Ответы на вопрос 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;
}
}
Ответ написан
Комментировать
gassmonkey
@gassmonkey
Провокатор
Оберни .container враппером с фоном-картинкой. В чём проблема?
А вообще, советую пока отказаться от бутстрапа, если ты без него такую элементарщину реализовать не можешь.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы