Bootstrap. Какая должна быть структура разметки страницы?

Question

[Кирилл Трифонов]

Всем привет.
Вот макет страницы

Нужно чтобы левая часть (Где меню и лого) растягивалась до конца страницы влево, там border у ссылок до края.
И так же только с правой частью контента, должна растягиваться до края страницы вправо. НО при этом, чтобы контент был по середине.
Верстаю с bootstrap. Верстка фиксированная, 1220px.

Comments

[Максим Тимофеев]

код основного скелета в студию.

Answer 1

[dom1n1k]

Назовите мне хоть одну причину, зачем тут нужен бутстрап? :)
- лейаут с выкрутасом
- резины и адаптивности нет
- дизайн элементов (кнопочки етц) кастомный

Так и побить страницу на 2 блока (левый и правый), а уже внутри них плясать.
Ширину этих блоков можно подобрать процентами, или vw, или calc - вариантов много, нужно пробовать.
Вероятно, нужен будет либо флексбокс, либо абсолютное позиционирование, чтобы отогнать нижний логотип вниз.

Но сделаю оговорку, что надо видеть внутренние страницы - они могут быть другими и серьезно повлиять на подход.

Comments

[Faber Estello]

назовите мне хоть одну причину, считать ваш ответ приемлемым?! Если заказчик просит бутстрап и если нужна поддержка ие9! Какой флекс, какой calc??!

[dom1n1k]

Flex и calc в данном случае лишь одни из вариантов. Если очень нужно, 100% можно обойтись и без них.

А заказчик тут может настаивать на бутстрапе только по одной причине - ранее ему такие же свидетели секты бутсрапа напели, что это круто и молодежно.

[Andrew Floatrx]

dom1n1k: +1

[Константин Давыдов]

dom1n1k: Поддерживаю! Куда этот Бутстрап уже только не суют. Тем более вёрстка фиксированная.

Answer 2

[HamSter]

Для блоков выходящих за пределы wrap я бы использовала псевдоэлементы :after или :before с позиционированием типа

.box {
  position: relative; 
}

.box:before {    
   content: '';
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    bottom: 0;
    left: -9999px;
  background: ваш фон ;
}

Answer 3

[Dvorak]

Есть плагин на jQuery, который отлично с этим справляется

Comments

[Иван]

Троль.