Bootstrap3: Как сделать чтобы шапка сайта не дублировалась?

Question

[Amlo]

К примеру, у меня шапка сайта не однотонная, а с изображением или просто градиент, так как bootstrap при изменении масштаба шапку делит на блоки, в своей сетке, то получается, что при уменьшении окна браузера она, естественно, разбивается на блоки, и картинка дублируется, а нужно, чтобы при уменьшении размера окна шапка оставалась такая, какая есть. Возможно это реализовать?

Answer 1

[Keltstr]

Не используйте стандартную сетку, а сделайте свой блок для шапки , например задавая ширину и высоту в процентах.
Или если хотите использовать стандартную сетку, то для каждой стандартной ширины вьюпорта

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

настройте отображение шапки и составляющих ее блоков с помощь css-классов .col-xs-XX, col-sm-XX .col-md-XX, .col-lg-XX, .col-lg[xs,sm,md,lg]-offset, .visible-xs[xs,sm,md,lg]-block, .col-md[xs,sm,md,lg]-pull-XX, .col-md[xs,sm,md,lg]-push-XX - здесь XX числа от 1 до 12(12 это кол-во столбцов в стандартной сетке). Например:

<div class="col-xs-6 col-sm-4 .col-md-4 col-lg-6">содержимое блока</div>

А лучше читайте документацию по сетке