Jednostka bohatera o pełnej szerokości na Twitterze Bootstrap

Question

W this example layout Chcę, aby tylko jednostka bohatera miała 100% szerokości i spoczywała w domyślnej siatce. Na przykład check this site. Ma tylko część bohatera (obszar prezentacji) na całej szerokości i reszta o ustalonej szerokości (nawigacja, zawartość na dole, stopka).

Muszę to zrobić, nie tracąc elastycznego wyglądu.

Answer 1

Przenieś swój div .hero-unit div poza twój .container div.

Styl .container ogranicza się do ustawionej szerokości. a wszystko, co w nim jest, będzie miało maksymalną szerokość jego rodzica. zamiast:

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

zastosowanie:

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

Answer 2

Cóż odpowiedź jest prawo, ale kiedy tylko zmienić rozmiar strony, bohater-jednostka będzie następnie zmienić mieć przestrzenie wokół (prawy 20px, 20px z lewej), ponieważ wszystkie elementy są związane z tym body has paddings in @media max-width: 767px. Wystarczy zrobić poniższy kod, aby go naprawić za:

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