Znaczenie liczb w "col-md-4", "col-xs-1", "col-lg-2" w Bootstrap
Jestem zdezorientowany z systemem grid w nowym Bootstrap, szczególnie te klasy:
col-lg-*
col-md-*
col-xs-*
(gdzie * oznacza pewną liczbę).
Czy ktoś może wyjaśnić, co następuje:
- Jak ten numer wyrównuje siatkę?
- Jak żeby użyć tych liczb?
- Co? oni naprawdę reprezentują?
5 answers
Ignorowanie liter (x s, sm, md, lg) na razie, zacznę od liczb...
- liczby (1-12) reprezentują część całkowitej szerokości dowolnego div
- wszystkie div są podzielone na 12 kolumn Tak więc,
col-*-6
obejmuje 6 z 12 kolumn (połowa szerokości), col-*-12
obejmuje 12 z 12 kolumn (cała szerokość), itd
Więc, jeśli chcesz dwie równe kolumny aby rozciągnąć div, napisz
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Jeśli chcesz trzy nierówne kolumny aby rozciągnąć tę samą szerokość, możesz napisać:
<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>
Zauważysz, że # kolumn zawsze dodaje się do 12. Może być mniej niż dwanaście, ale uważaj, jeśli więcej niż 12, ponieważ twoje obrażające div spadną do następnego wiersza(Nie .row
, co jest zupełnie inną historią).
.row
owijką wokół nich), takie jak:
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">Column 1-a</div>
<div class="col-xs-8">Column 1-b</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">Column 2-a</div>
<div class="col-xs-10">Column 2-b</div>
</div>
</div>
Każdy zestaw zagnieżdżone div również obejmują do 12 kolumn macierzystego div. Uwaga: ponieważ każda klasa .col
ma obramowanie 15px po obu stronach, powinieneś Zwykle zawijać zagnieżdżone kolumny w .row
, która ma marginesy-15px. Pozwala to uniknąć powielania wypełnienia i utrzymuje zawartość w linii między zagnieżdżonymi i nie zagnieżdżonymi klasami col.
-- nie pytałeś dokładnie o użycie xs, sm, md, lg
, ale idą w parze, więc nie mogę pomóc, ale dotknąć...
W skrócie, są one używane do określenia przy czym rozmiar ekranu klasa ta powinna mieć zastosowanie:
- xs = bardzo małe ekrany (telefony komórkowe)
- sm = małe ekrany (Tablety)
- md = średnie ekrany (niektóre pulpity)
- lg = duże ekrany (Pozostałe pulpity)
Przeczytaj "Siatka Opcje " rozdział z oficjalnej dokumentacji Bootstrap dla więcej szczegółów.
Powinieneś zazwyczaj klasyfikować div za pomocą wielu klas kolumn, aby zachowywał się inaczej w zależności od rozmiaru ekranu(to jest serce tego, co sprawia, że Bootstrap reaguje). na przykład: div z klasami col-xs-6
i col-sm-4
obejmie połowę ekranu na telefonie komórkowym (xs) i 1/3 ekranu na tabletach (sm).
<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->
Uwaga: zgodnie z poniższym komentarzem klasy siatki dla danego rozmiaru ekranu dotyczą tego rozmiaru i większego chyba że inna deklaracja ją nadpisuje (tzn. col-xs-6 col-md-4
obejmuje 6 kolumn na xs
oraz sm
, oraz 4 kolumny na md
oraz lg
, mimo, że sm
i lg
nigdy nie zostały wyraźnie zadeklarowane)
Uwaga: jeśli nie zdefiniujesz xs
, domyślnie będzie to col-xs-12
(tzn. col-sm-6
to połowa szerokości na sm
, md
i lg
ekrany, ale na ekranach o pełnej szerokości).
Uwaga: to jest rzeczywiście całkowicie w porządku, Jeśli .row
zawiera więcej niż 12 cols, o ile wiesz, jak zareagują. -- To kwestia sporna i nie wszyscy się z tym zgadzają.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-26 13:56:39
System siatki Bootstrap ma cztery klasy:
xs (dla telefonów)
sm (dla tabletek)
md (dla komputerów stacjonarnych)
lg (dla większych komputerów stacjonarnych)Powyższe klasy można łączyć, aby tworzyć bardziej dynamiczne i elastyczne układy.
Wskazówka: każda klasa skaluje się, więc jeśli chcesz ustawić te same szerokości dla xs i sm, wystarczy podać tylko xs.
OK, odpowiedź jest łatwa, ale przeczytaj on:
Col-lg - oznacza kolumnę dużą ≥ 1200px
col-md - oznacza medium kolumnowe≥ 992px
col-xs- oznacza kolumnę extra small ≥ 768px
Liczby pikseli są punktami przerwania, więc na przykład col-xs
celuje w element, gdy okno jest mniejsze niż 768px (prawdopodobnie urządzenia mobilne)...
Stworzyłem również poniższy obrazek, aby pokazać, jak działa system siatki, w tym przykładzie używam ich z 3, Jak col-lg-6
, aby pokazać jak działa system siatki na stronie, zobacz jak lg
, md
i xs
reagują na rozmiar okna:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-29 13:10:13
From Twitter Bootstrap documentation :
- mała siatka (≥768px) =
.col-sm-*
, - średnia siatka (≥ 992px) =
.col-md-*
, - duża siatka (≥1200px) =
.col-lg-*
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-30 18:44:10
Najważniejsze jest to:
col-lg-*
col-md-*
col-xs-*
col-sm
Określ, ile kolumn będzie w tych różnych rozmiarach ekranu.
Przykład: jeśli chcesz, aby były dwie kolumny na ekranach pulpitu i na ekranach telefonów, umieść w swoich kolumnach dwie klasy col-md-6
i dwie klasy col-xs-6
.
Jeśli chcesz, aby w ekranach pulpitu były dwie kolumny i tylko jedna kolumna na ekranach telefonów (tj. dwa wiersze ułożone jeden na drugim), w swoich kolumnach umieszczasz two col-md-6
i dwa col-xs-12
, a ponieważ suma będzie 24 będą automatycznie stos na siebie, lub po prostu zostawić xs
styl out.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-07 20:27:44
Proszę bardzo
Col-lg-2 : jeśli ekran jest duży (lg) to ten komponent zajmie miejsce 2 elementy uwzględniające cały wiersz mogą zmieścić 12 elementów (widać więc, że na dużym ekranie komponent ten zajmuje 16% miejsca w wierszu)
Col-lg-6 : Jeśli ekran jest duży (lg) to ten komponent zajmie miejsce 6 elementy uwzględniające cały wiersz mogą zmieścić 12 elementów - Po zastosowaniu zobaczysz, że komponent ma wzięte połowę dostępnego miejsca w rzędzie.
Powyższa reguła jest stosowana tylko wtedy, gdy ekran jest duży. gdy ekran jest mały, reguła ta jest odrzucana i wyświetlany jest tylko jeden element w wierszu.
Poniżej obrazek pokazuje różne szerokości ekranu:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-02 14:03:07