Znaczenie liczb w "col-md-4", "col-xs-1", "col-lg-2" w Bootstrap

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ą).

<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ą.