Преместване на фона на колоната отстрани на браузъра - html, css, twitter-bootstrap-3

Опитвам се да протягам .black колоната "на черен фон на лявата страна на браузъра.Аз не съм сигурен как да се постигне това, без да поставяте контейнера в контейнер за течности.

Примерен пример

Има ли начин да направите това? Аз избягвам контейнера за течности, защото съдържанието трябва да е с твърда ширина.

Отговори:

Това може да бъде постигнато чрез добавяне на абсолютно позициониран контейнер с черен фон непосредствено след маркирането на контейнера и правене на контейнера относително.

HTML

<div class="container relative">
<div class="col-md-3 black fill"></div>

CSS

.relative {
position: relative;
}

.fill {
position: absolute;
top:0;
left:-25%;
height:100%;
}

Тук работи пример.

обяснение

1. Абсолютно позиционираните елементи основно плуват в html документа и се позиционират според прозореца на браузъра, в зависимост от горната, лявата, дясната, долната.
2. Ако обаче предвестникът на абсолютно позициониран елемент е сравнително позициониран, тогава абсолютно позиционираните елементи се поставят относителен до основния контейнер и по този начин до relative css клас за контейнера за bootstrap.
3. Тъй като ширината на абсолютно позиционирания дял е 25% според col-md-3 клас и за да компенсираме левия марж на контейнера за bootstrap, използваме a отрицателен лявата стойност от 25% за нашата абсолютно позиционирана div.
4. Необходима е височина от 100%, за да се затвори контейнерът за черен фон до височината на контейнера за зареждане.

Горепосочените CSS стилови свойства, когато се комбинират правилно, могат да дадат желания резултат.