Bootstrap 3.3.6 Granice siatki nie zapewniające sztywnej struktury

Question

Próbuję zapoznać się z Bootstrap i siatką. Próbuję utworzyć następujący układ makr:

=================================================== 
| PageTitle    |________________________| 
|________________________| +1 |________| img| img| 
| Make a choice.   |_____|________|____|____| 
|      |      | 
=================================================== 

Głównym elementem jest jumbotron, w obrębie którego znajduje się rząd. Następnie podzieliłem rząd na dwa elementy: <div> każdy z nich (chcę pozostawić lewy panel nad prawym na telefonie komórkowym).

Lewy panel jest dodatkowo podzielony na dwa wiersze z pewną zawartością tekstową.

Prawy panel zawiera wiersz, podzielony na dwie sekcje jeszcze raz. Sekcje lewa i prawa są zarówno class="col-xs-12 col-sm-3". Ma to na celu zapewnienie, że na mniejszych ekranach każdy z nich pasuje jeden na drugim i wypełnia całą poziomą przestrzeń. Rząd i kolejna podbudowa kolumny dzieli przestrzeń tak, jak pokazano.

Oto mój kod do tej pory: Link

Jak będzie można zobaczyć, układ zachowuje się jak bym się spodziewać w rozmiarze XS (poniżej 768px). Jednak w większym rozmiarze wiersze i kolumny w prawym panelu zachodzą na siebie, a obrazy zniknęły.

Wszelkie wskazówki dotyczące zrozumienia, dlaczego sieć nie działa tak, jak się spodziewam (tj. Jako tabela inteligentnie odtwarzająca na różnych rozmiarach ekranu), zostałyby docenione!

Answer 1

Struktura siatki na prawym panelu małego urządzenia wydaje się błędna.

W fragmencie kodu Twojego JSFiddle. Na numer linii 17 and 32 zmień class="col-xs-6 col-sm-3" na class="col-xs-6 col-sm-6".

Spowoduje to, że obrazy pojawią się ponownie.

Aktualizacja:

Oczywiście można, po prostu trzeba zmienić swoje podejścia do podejmowania skonstruować i każda struktura jest możliwa. Sprawdź this Fiddle. Pokazuje kolumny pod rzędami i wierszami pod strukturą kolumn w sposób prosty do zrozumienia.

W twoim przypadku musisz zrobić to na najwyższym poziomie, podzielić strukturę na 4 kolumny i robić, co chcesz w każdej kolumnie.

Najprostszym sposobem podejścia i zrozumienia skomplikowanej strukturze:

• najpierw ustalić, ile kolumn potrzebuje struktury. Najwyższy powinien być zawsze podzielony, biorąc pod uwagę kolumny.

• Po określeniu kolumn, Rozważ każdą kolumnę jako stronę o pełnej szerokości (ignorując inne kolumny na razie) i podziel ponownie.

Proste :-)

Answer 2

przepraszam jeśli pytanie prosiłem nie było jasne, w jakikolwiek sposób, ale tutaj jest to, co próbował zrobić.Mamy nadzieję, że widząc odpowiedź side-by-side z pytaniem pomogą wyjaśnić:

HTML

<div class="row"> 
    <div class="col-xs-12 col-sm-5"> 
    <h2> 
     PageTitle. 
    </h2> 
    </div> 
    <div class="col-xs-6 col-sm-1 text-center"> 
    <h2> 
     +1 
    </h2> 
    </div> 
    <div class="col-xs-6 col-sm-2"> 
    <div class="statsbox"> 
     <div class="statsbaryes"> 
     </div> 
     <div class="statsbarno"> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-6 col-sm-2 text-center"> 
    <img id="image1" alt="image" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" /> 
    </div> 
    <div class="col-xs-6 col-sm-2 text-center"> 
    <img id="image2" alt="face" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" /> 
    </div> 
</div> 

CSS

.statsbaryes { 
    height: 30px; 
    background-color: green; 
    width: 20%; 
} 
.statsbarno { 
    height: 30px; 
    background-color: red; 
    width: 80%; 
} 
.statsbox { 
    height: 66px; 
    right: 0px; 
    width: 100%; 
    border: 3px solid grey; 
} 

https://jsfiddle.net/z9jvnahd/

Jak wspomniano w moim komentarzu do odpowiedzi Nikhila, problem wynikał z mojego nieporozumienia, że ​​mogłem mieć tyle warstw poddziałów wiersz/kolumna, ile chciałem, aby pomóc w ułożeniu układu, o ile było 12 kolumn dla każdego logiczny wiersz na ekranie. Jednak tak nie jest i kolumny muszą być zgrupowane razem w rzędzie najwyższego poziomu znaku, aby zachowywać się poprawnie - z mojego eksperymentu.