Расширить строку начальной загрузки за пределами контейнера

Мы используем Bootstrap 3 на нашем сайте, и у меня есть запрос на новый шаблон с дизайном, в котором есть некоторые элементы, которые на самом деле не соответствуют сетке начальной загрузки. Я пытался заставить его работать, но не удалось.

Я попытался объяснить проблему на изображении ниже. У кого-нибудь есть идея, как я могу это решить?

введите описание изображения здесь

Один из вариантов – использовать элемент CSS pseudo ::before который будет изменяться по высоте вместе с col-lg-6 ..

 #main { background: lightgreen; height: 100vh; } #main > .row { height: 100vh; } .left { background: red; position: relative; top: 50%; transform: translateY(-50%); } .left:before { left: -999em; background: red; content: ''; display: block; position: absolute; width: 999em; top: 0; bottom: 0; } 
..

http://www.codeply.com/go/C80RYwhWrc


Другим вариантом является использование абсолютной позиции .container-fluid (full-width) за содержимым .container который действует как «призрак» …

 .abs { position: absolute; right:0; top:0; bottom:0; z-index: 1; } 

Content

https://www.codeply.com/go/txUHH72f16 (Bootstrap 4)


Похожие вопросы :
Получите две колонки с разными цветами фона, которые простираются до края экрана
Пример с изображениями
Расширить элемент за контейнером начальной загрузки

Вот вариант решения. Вам нужно создать абсолютный позиционный div, включить его в col-xs-6 , но этот контейнер должен иметь position: static Что касается ширины экрана 1200px и больше, ширина контейнера 1170px, вы можете рассчитать padding-left для плавающего div: padding-left: calc((100% - 1170px) / 2);

 .blk { background: lightgreen; width: 50%; position: absolute; } .container { background: tomato; height: 100vh; padding: 40px 0; } @media only screen and (min-width: 1200px) { .cell { position: static; } .blk { left: 0; right: 50%; padding-left: calc((100% - 1170px) / 2); } } 
 
Lorem ipsum dolor
Lorem ipsum dolor

http://www.codeply.com/go/CikO35yioi

Я действительно не понял, что вы имели в виду. это то, что я думаю, что вы имели в виду.

 

ДЕМО: http://jsfiddle.net/jayjay95/ybx97y2c/
(если это то, что вы хотите, измените ширину контейнера 200px на 1200px и col-xs-6 на col-lg-6 .

Вы можете использовать этот код ниже:

     Example          




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































в Example




































































































  • Проблемы с компоновкой бутстрапа 3?
  • Bootstrap 3 - Как загрузить контент в модальном теле через AJAX?
  • Проблемы с Typeahead с Bootstrap 3.0 RC1
  • Используйте раскрывающееся меню Bootstrap 3 в качестве контекстного меню
  • Отзывчивый веб-сайт уменьшен до полной ширины на мобильном телефоне
  • Bootstrap: как складывать divs разной высоты?
  • Бутстрап-grid с фиксированной оболочкой. Предотrotation стеков столбцов
  • Система загрузочной сетки Bootstrap с разной высотой
  • Контейнер-жидкость против контейнера
  • Строки и столбцы Bootstrap. Нужно ли использовать строку?
  • Переупорядочивание divs с помощью Twitter Bootstrap?
  • Давайте будем гением компьютера.