¿Cómo crear un div de ancho de pantalla 100% dentro de un contenedor en bootstrap? [duplicar]

Esta pregunta ya tiene una respuesta aquí:

Digamos que tengo el siguiente marcado: 

<div class="container">
    <div class="row">
        <div class="col-md-12">
            ...
            <div class="full-width-div">
            </div>
        </div>
    </div>
</div>

Ahora, ¿cómo hacer que .full-width-div se extienda a todo el ancho de la pantalla? Porque actualmente está limitado dentro del contenedor.

Author: johnnyRose, 2014-06-05
Source

3 answers

Debe sacar ese div fuera del contenedor. Le estás pidiendo a un div que se extienda más que su padre, lo cual generalmente no es una práctica recomendada.

Si no puede sacarlo del div por alguna razón, debe cambiar el estilo de posición con este css: 

.full-width-div {
    position: absolute;
    width: 100%;
    left: 0;
}

En lugar de absoluto, también puedes usar fijo, pero entonces no se moverá mientras te desplazas.

 54
Author: Cody,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-25 15:47:06

Debes usar container-fluid, no container. Ver ejemplo: http://www.bootply.com/onAFpJcslS

 29
Author: Shawn Taylor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-05 02:39:20

La razón por la que su div de ancho completo no se extiende al 100% a su pantalla es debido a su "contenedor" padre que ocupa solo alrededor del 80% de la pantalla.

Si desea que se extienda al 100% a la pantalla, puede fijar la posición "full-width-div" o usar la clase "container-fluid" en lugar de "container".

Ver documentos de Bootstrap 3: http://getbootstrap.com/css/#grid

 2
Author: Renesansz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-05 00:57:39