Dotyczy tylko Bootstrap 3.
Ignorując litery (x s , sm , md , lg ) do teraz , zacznę tylko numerami ...
- liczby (1-12) reprezentują część całkowitej szerokości dowolnego elementu div
- wszystkie div są podzielone na 12 kolumn
- więc
col-*-6obejmuje 6 z 12 kolumn (połowa szerokości), col-*-12obejmuje 12 z 12 kolumn (cała szerokość) itp
Jeśli więc chcesz, aby dwie równe kolumny obejmowały div, napisz
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Lub, jeśli chcesz, aby trzy nierówne kolumny obejmowały 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 liczba kolumn zawsze sumuje się do 12. Może być mniejsza niż dwanaście, ale uważaj, jeśli jest większa niż 12, ponieważ twoje obrażające div będą spadać do następnego rzędu (nie .row, co jest zupełnie inną historią).
Możesz także zagnieżdżać kolumny w kolumnach (najlepiej z .rowotoczką), 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żonych elementów div obejmuje także do 12 kolumn ich elementu div. UWAGA: Ponieważ każda .colklasa ma wypełnienie po 15 pikseli po każdej stronie, zwykle należy zawinąć kolumny zagnieżdżone w .rowmarginesie -15px. Pozwala to uniknąć powielania dopełniania i utrzymuje zawartość w linii między zagnieżdżonymi i nie zagnieżdżonymi klasami col.
- Nie pytałeś konkretnie o xs, sm, md, lgużycie, ale idą w parze, więc nie mogę się powstrzymać ...
Krótko mówiąc, służą do określenia, przy jakim rozmiarze ekranu ta klasa powinna się stosować:
- xs = dodatkowe małe ekrany (telefony komórkowe)
- sm = małe ekrany (tablety)
- md = średnie ekrany (niektóre komputery stacjonarne)
- lg = duże ekrany (pozostałe komputery stacjonarne)
Przeczytać „ Opcje siatki ”
rozdział z oficjalnej dokumentacji Bootstrap więcej szczegółów.
Zazwyczaj powinieneś klasyfikować div używając wielu klas kolumn, aby zachowywał się różnie w zależności od rozmiaru ekranu (to jest sedno tego, co sprawia, że bootstrap reaguje). np .: div z klasami col-xs-6i col-sm-4będzie obejmował połowę ekranu telefonu komórkowego (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: jak w poniższym komentarzu, klasy siatki dla danego rozmiaru ekranu mają zastosowanie do tego rozmiaru ekranu i większych, chyba że zastąpi go inna deklaracja (tj. col-xs-6 col-md-4Obejmuje 6 kolumn na xs ism , i 4 kolumny na md ilg , mimo że smi lgnigdy nie zostały wyraźnie zadeklarowane)
UWAGA: jeśli nie definiują xs, będzie domyślnie col-xs-12(czyli col-sm-6jest o połowę szerokości sm, mdi lgekrany, ale o pełnej szerokości na xsekranach).
UWAGA: w rzeczywistości jest całkowicie w porządku, jeśli .rowzawierasz więcej niż 12 kols, o ile wiesz, jak zareagują. - To jest kwestia sporna i nie wszyscy się z tym zgadzają.
