Unidad héroe de ancho completo en Twitter Bootstrap

Question

En this example layout Quiero que la unidad héroe sea 100% amplia y que descanse dentro de la cuadrícula predeterminada. Por ejemplo, check this site. Solo tiene la parte de héroe de la unidad (área de vitrina) en todo el ancho y el resto en ancho fijo (navegación, contenido inferior, pie de página).

Necesito hacer esto sin perder la característica de diseño sensible.

Answer 1

mueve tu .hero-unit div fuera de tu .container div.

el estilo .container lo confina a un ancho establecido. y cualquier cosa dentro de ella tendrá un ancho máximo de sus padres. en lugar de:

<div class="container"> 
    <div class="hero-unit"> 
    </div> 
</div> 

uso:

<div class="hero-unit"> 
</div> 
<div class="container"> 
</div> 

Answer 2

Bueno, la respuesta es correcta, pero cada vez que se cambia el tamaño del sitio, héroe de la unidad y luego cambiará a espacios a ambos lados (20 píxeles a la derecha, 20px izquierda) porque todos los elementos están ligados a este body has paddings in @media max-width: 767px. Sólo hacer el código de abajo solucionarlo demasiado:

@media (max-width: 767px) { .hero-recipiente { margen derecha: -20px; margin-left: -20px; } }