Co oznacza "Poziomy przez cały czas"?

Question

Nowa dokumentacja Bootstrap trzy dokumenty explains the grid behaviour jako "Poziomy przez cały czas" dla dodatkowych małych urządzeń. Co to znaczy? Z pewnością na małym urządzeniu wszystkie kolumny byłyby ustawione pionowo jedna na drugiej? To, co mnie tu zawodzi, to moje (brak) zrozumienie, czym jest siatka.

Pochodzę z perspektywy innej niż projektanta i próbuję powtórzyć kilka produktów w elastycznej siatce. Liczba kolumn w każdym rzędzie zmieni się w zależności od tego, czy wyświetlana jest nieparzysta czy parzysta liczba produktów. < - Bootstrap i podobne wydaje się proste przy statycznej zawartości na stronach dynamicznych. Na przykład, czy musimy wstawić puste <div class="col-xs*"></div>, aby uzyskać do 12?

Answer 1

Co oznacza "Poziomy przez cały czas" oznacza, że ​​nie ma punktu przerwania, w którym col-xs- * zmieni się z przeniesienia na stos. Na przykład:

<div class="col-xs-6"></div> 
<div class="col-xs-6"></div> 

W tym przykładzie zawsze będą dwie kolumny o jednakowym rozmiarze, niezależnie od tego, czy korzystasz z telefonu, tabletu czy komputera. Dla kontrastu:

<div class="col-sm-6"></div> 
<div class="col-sm-6"></div> 

W tym przykładzie wykonania, kolumny będą ułożone dopóki okno robocze urządzenia wynosi> = 768, w którym to będzie włączyć do dwóch kolumn o jednakowej wielkości.

Pytanie, które możesz sobie zadać, brzmi "Dlaczego wszystkie te odmiany?" To, co dają nam te opcje, to możliwość dostosowania układu na różnych urządzeniach, bez brudzenia rąk w CSS. Na przykład, jeśli chciałem dwie równe kolumny na telefon, ale 75/25 podzielone w tabletkach iw górę, chciałbym wykonać następujące czynności:

<div class="col-xs-6 col-sm-8"></div> 
<div class="col-xs-6 col-sm-4"></div> 

Jeśli chciał ułożone na telefonach, równy na tablecie, a 75/25 na pulpicie, a następnie to zrobić:

<div class="col-sm-6 col-md-8"></div> 
<div class="col-sm-6 col-md-4"></div> 

Ponieważ nie są jednoznacznie określające siatkę na telefon, że ma zamiar powrócić do ułożone.

Aby uzyskać solidne odczucie, zrzuć kilka prostych kratek, a następnie rozpocznij zmianę rozmiaru przeglądarki. Powinieneś być w stanie zobaczyć, jak zmienia się znacznie łatwiej niż w samych dokumentach.

EDIT

Myśl jednym innym przykładzie, które mogłyby być przedmiotem zainteresowania: dwie równe kolumny zarówno na telefonie i tablecie, potem 75/25 i pulpicie. Kod:

<div class="col-xs-6 col-md-8"></div> 
<div class="col-xs-6 col-md-4"></div> 

To jest naprawdę świetna ilustracja "Poziomej przez cały czas". Ponieważ nie podajemy col-sm, col-xs jest ciągle egzekwowany, dopóki nie osiągniemy punktu przerwania pulpitu, który jest ustawiony na> = 992.