Как сделать HTML-цвета дизайна Bootstrap от края до края

Question

У меня есть довольно элементарные знания HTML, CSS и Bootstrap. Поэтому, пожалуйста, простите меня, если какая-либо из терминов неверна.

Это страница: http://jowoco.com/stackoverflow/scheduletech.html

На больших мониторах (резолюции> 1500px) или масштаб изображения экрана (Ctrl/CMND + "-"), вы увидите цвета просто остановить. В идеале, углы продолжались бы, но, по крайней мере, было бы неплохо, чтобы цвета продолжались слева и справа от экрана как твердые тела (см. Макет).

Я прикрепил скриншот того, что, по моему мнению, может работать как исправление (не уверен, что это div или span), но не уверен, как это сделать на практике.

спасибо заранее за вашу помощь и время, Wojo

Answer 1

Есть несколько способов сделать это ... но самый простой на сегодняшний день является создание линейного градиента фон для страницы, а не прямой белый.

Это позволило бы бару перейти от края к краю, даже если основной корпус страницы остановлен.

К сожалению, вы не дали достаточно информации для меня, чтобы просто передать вам код для этого:

1. Что угол синей полосой?
2. Изменяется ли геометрия вашей страницы при изменении размера окна браузера? В частности, движется ли этот синий баннер вообще?
3. Какие браузеры вам нужны для поддержки?

Если у вас есть ответы на эти вопросы, не стесняйтесь бросить их здесь, и я обновлю этот ответ.

Если вы предпочитаете взломать код самостоятельно, вы можете создать его на Colorzilla. Результирующий код будет выглядеть примерно так:

background: #ffffff; /* Old browsers */ 
background: -moz-linear-gradient(45deg, #ffffff 50%, #91b5b5 50%, #91b5b5 71%, #ffffff 71%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left bottom, right top, color-stop(50%,#ffffff), color-stop(50%,#91b5b5), color-stop(71%,#91b5b5), color-stop(71%,#ffffff)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* IE10+ */ 
background: linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 

Этот код охватывает все браузеры между Firefox, ранние и более поздние Chrome, и даже вплоть до IE 6-9.

Код, как правило, выглядит намного хуже, чем он ... для основной части кода вы можете напрямую установить угол, на котором должна появиться синяя полоска; Исключение составляют IE6-9 и более ранние версии Chrome.

Ранние версии Chrome, вероятно, почти не существуют, поскольку Chrome обычно автоматически обновляет себя ... но, как всегда, предыдущий Internet Explorer может быть проблематичным.