html - Extienda la fila de arranque fuera del contenedor
css twitter-bootstrap (4)
Estamos usando Bootstrap 3 en nuestro sitio y tengo una solicitud de una nueva plantilla con un diseño que tiene algunos elementos que realmente no siguen la grilla de bootstrap. He intentado que funcione pero no he tenido éxito.
Traté de explicar el problema en la imagen a continuación. ¿Alguien tiene una idea de cómo puedo resolver esto?
Aquí hay una variante de solución.
Debe crear un div posicionado absoluto, incluirlo en
col-xs-6
, pero este contenedor debe tener una
position: static
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);
}
}
<div class="container">
<div class="row">
<div class="col-lg-6 cell">
<div class="blk">Lorem ipsum dolor</div>
</div>
<div class="col-lg-6">Lorem ipsum dolor</div>
</div>
</div>
Puede usar este código a continuación:
<!DOCTYPE html>
<html class=" desktop landscape" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Example</title>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<style type="text/css">
.side{background-color: lightgrey;
}
.middle{background-color: green;
}
.red{background-color: red;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 1st section -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<!-- 2nd section -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 red" >
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="row">
<div class="col-lg-6 col-lg-6 col-md-6 col-xs-6 col-sm-6 red">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<!-- 3rd section -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>
Realmente no entendí lo que querías decir. Esto es lo que creo que quisiste decir.
<div class="container" style="width:1200px">
<div class="row">
<div class="col-lg-6">
</div>
</div>
</div>
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
.
Una opción es usar un elemento CSS pseudo
::before
que cambiará de tamaño 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;
}
<div class="container" id="main">
<div class="row">
<div class="col-lg-6 left">
..
</div>
</div>
</div>
http://www.codeply.com/go/C80RYwhWrc
Otra opción es usar una posición absoluta
.container-fluid
(ancho completo) detrás del contenido
.container
que actúa como un "fantasma" ...
.abs {
position: absolute;
right:0;
top:0;
bottom:0;
z-index: 1;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
<h4>Content</h4>
</div>
<div class="col-sm-6">
<!-- space over image -->
</div>
</div>
</div>
<div class="container-fluid abs">
<div class="row h-100">
<div class="col-sm-6 h-100">
<!-- empty spacer -->
</div>
<div class="col-sm-6 right">
<img src="//placehold.it/1000x400">
</div>
</div>
</div>
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 imagen derecha
Ejemplo con imagen restante
Extienda un elemento más allá del contenedor de arranque