Unità eroe a larghezza intera in Twitter Bootstrap

Question

In this example layout Desidero che l'unità dell'eroe sia larga al 100% e si trovi nella griglia predefinita. Ad esempio, check this site. Ha solo la parte dell'unità eroe (area vetrina) in tutta la larghezza e riposa in larghezza fissa (navigazione, contenuto inferiore, piè di pagina).

Ho bisogno di fare questo senza perdere la funzionalità di progettazione reattiva.

Answer 1

sposta il tuo .hero-unit div all'esterno del tuo .container div.

lo stile .container si limita a una larghezza impostata. e qualsiasi cosa al suo interno avrà una larghezza massima del suo genitore. invece di:

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

uso:

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

Answer 2

Beh, la risposta è giusta, ma ogni volta che si ridimensiona il sito, eroe-unità cambierà di avere spazi intorno (20px a destra, 20px a sinistra) perché tutti gli elementi sono legati a questo body has paddings in @media max-width: 767px. Basta fare il codice sottostante per risolvere il problema troppo:

@media (max-width: 767px) { .hero-container { margin-right: -20px; margin-left: -20px; } }