Extienda la fila de arranque fuera del contenedor

Estamos usando Bootstrap 3 en nuestro sitio y recibí una solicitud de una nueva plantilla con un diseño que tiene algunos elementos que realmente no siguen la grilla de arranque. Intenté hacer que funcionara pero no lo logré.

Intenté explicar el problema en la imagen a continuación. ¿Alguien tiene una idea de cómo puedo resolver esto?

enter image description here

Una opción es usar un elemento CSS pseudo ::before que cambiará el tamaño en altura junto con 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


Otra opción es usar una posición absoluta .container-fluid (full-width) detrás del contenido .container que actúa como un “fantasma” …

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

Content

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


Preguntas similares :
Obtenga dos columnas con diferentes colores de fondo que se extienden hasta el borde de la pantalla
Ejemplo con imágenes
Extienda un elemento más allá del contenedor de arranque

Aquí hay una variante de solución. Necesita crear div posicionado absoluto, incluirlo en col-xs-6 , pero este contenedor debe tener una position: static En cuanto al ancho de pantalla 1200px y más ancho de contenedor es 1170px, puede calcular relleno-izquierda para div flotante: 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

Realmente no entendí lo que querías decir. esto es lo que creo que quisiste decir.

 

DEMO: http://jsfiddle.net/jayjay95/ybx97y2c/
(Si esto es lo que desea, cambie el ancho del contenedor 200px a 1200px y col-xs-6 a col-lg-6 .

Puedes usar este código a continuación:

     Example