Jaka jest różnica między col-lg- *, col-md- * i col-sm- * w Bootstrap?


544

Jaka jest różnica między col-lg-*, col-md-*a col-sm-*w Twitter Bootstrap?


1
Zobacz getbootstrap.com/css do pxwymiarów każdego z nich.
Josh Crozier

8
że wiem, ale nie rozumiem jego działania
StreetCoder,

Uważam, że mylące jest to pytanie bootstrap-3i bootstrap-4jako tag, ponieważ są one zupełnie różne
Kolob Canyon

Odpowiedzi:


529

Zaktualizowano 2019 ...

Bootstrap 3 siatka jest w 4 warstwach (lub „pułapki”) ...

  • Bardzo mały (dla smartfonów .col-xs-*)
  • Mały (na tablety .col-sm-*)
  • Średni (dla laptopów .col-md-*)
  • Duże (dla laptopów / komputerów stacjonarnych .col-lg-*).

Te rozmiary siatki pozwalają kontrolować zachowanie siatki na różnych szerokościach. Różne warstwy są kontrolowane przez zapytania mediów CSS .

Tak więc w 12-kolumnowej siatce Bootstrap ...

col-sm-3ma szerokość 3 z 12 kolumn (25%) na typowej małej szerokości urządzenia (> 768 pikseli)

col-md-3ma szerokość 3 z 12 kolumn (25%) na typowej średniej szerokości urządzenia (> 992 pikseli)


Mniejszy poziom ( xs, smi md) określa ponadto rozmiar dla większych szerokości ekranu . Tak więc dla kolumny o tym samym rozmiarze na wszystkich poziomach po prostu ustaw szerokość najmniejszej rzutni ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> jest taki sam jak,

<div class="col-sm-3">..</div>

Implikowane są większe poziomy . Ponieważ col-sm-3oznacza 3 units on sm-and-up, chyba że zostanie to przesłonięte przez większą warstwę, która używa innego rozmiaru.

xs(domyślnie)> przesłonięty przez sm> przesłonięty przez md> przesłonięty przezlg


Połącz klasy, aby użyć zmiany szerokości kolumn na różnych rozmiarach siatki . To tworzy responsywny układ.

<div class="col-md-3 col-sm-6">..</div>

Te sm, mda lgkratki wszystkich „komin” pionowo na ekranie / okien z mniej niż 768. W tym miejscu xsmieści się siatka. Kolumny korzystające z col-xs-*klas nie będą układać się w pionie i nadal będą się zmniejszać na najmniejszych ekranach.

Zmień rozmiar przeglądarki za pomocą tego pokazu, a zobaczysz efekty skalowania siatki.


Bootstrap 4

W Bootstrap 4 jest nowy -xl-rozmiar, zobacz to demo . Również -xs-infix została usunięta , więc najmniejsze kolumny są po prostu col-1, col-2.. col-12itd ..

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Bootstrap 4 Grid Demo

Ponadto Bootstrap 4 zawiera nowe kolumny z automatycznym układem . Mają one również czułe punkty przerwania ( col, col-sm, col-md, itd ..), ale nie mają zdefiniowanych% szerokości. Dlatego kolumny automatycznego układu wypełniają równą szerokość w wierszu.


W tym artykule wyjaśniono więcej na temat siatki Bootstrap


8
Jaki jest efekt zagnieżdżenia col-sm w col-md? Jak to zmieni zachowanie col-sm i col-md?
Donato,

1
Powoduje to, że zagnieżdżone smpozostają w kolumnach na węższych szerokościach. Spróbuj sam: codeply.com/go/LGyFiEJqXq
Zim

@Skelly, czy mogę prosić o spojrzenie na responsywne pytanie związane z projektowaniem tutaj: tinyurl.com/nadfh2u ?
Istiaque Ahmed,

Dlaczego to <div class="col-sm-3">..</div>samo co <div class="col-lg-3 col-md-4 col-sm-3">..</div>nie <div class="col-lg-3 col-md-3 col-sm-3">..</div>(xx-3 dla wszystkich)?
jbyrd

Dzięki .. Naprawiłem to: <div class="col-lg-3 col-md-3 col-sm-3">..</div>jest taki sam jak<div class="col-sm-3">..</div>
Zim

252

Bootstrap docs zrobić to wyjaśnić, ale nadal mi zajęło je zdobyć. Ma to większy sens, gdy wyjaśniam to sobie na jeden z dwóch sposobów:

Jeśli myślisz o kolumnach rozpoczynających się w poziomie, możesz wybrać, kiedy chcesz je ułożyć w stos .

Na przykład, jeśli zaczynasz od kolumn: ABC

Ty decydujesz, kiedy powinny się układać tak:

ZA

b

do

Jeśli wybierzesz col-lg, kolumny będą się układać, gdy szerokość będzie <1200px.

Jeśli wybierzesz col-md, kolumny będą się układać, gdy szerokość będzie <992px.

Jeśli wybierzesz col-sm, kolumny będą się układać, gdy szerokość będzie <768px.

Jeśli wybierzesz col-xs, kolumny nigdy się nie ustawią.

Z drugiej strony, jeśli myślisz o kolumnach, które zaczynają się układać w stos, możesz wybrać, w którym momencie staną się poziome :

Jeśli wybierzesz col-sm, kolumny staną się poziome, gdy szerokość będzie> = 768px.

Jeśli wybierzesz col-md, kolumny staną się poziome, gdy szerokość będzie> = 992px.

Jeśli wybierzesz col-lg, kolumny staną się poziome, gdy szerokość będzie> = 1200px.


33
Ta odpowiedź najlepiej to wyjaśnia. Przynajmniej tak się stało. To wszystko, co musiałem wiedzieć: „Jeśli wybierzesz col-lg, kolumny będą się układać, gdy szerokość będzie <1200px.”. Dzięki!
Jo Smo,

3
Tak wyjaśnisz podczas jazdy windą i zrozumiesz swoje wyjaśnienie.
Kevin Le - Khnle

Wiem, że to jest stare, więc nie ma znaczenia, jaki col- * wybiorę, czy ostatecznie będzie układał się w różnych rozmiarach?
null

3
To właśnie zmieniło moje rozumienie Bootstrap.
kds23


24

Myślę, że mylącym aspektem tego jest fakt, że BootStrap 3 to mobilny system responsywny i nie wyjaśnia, jak wpływa to na hierarchię col-xx-n w tej części dokumentacji Bootstrap. To sprawia, że ​​zastanawiasz się, co dzieje się na mniejszych urządzeniach, jeśli wybierzesz wartość dla większych urządzeń, i zastanawiasz się, czy istnieje potrzeba określenia wielu wartości. (Ty nie)

Chciałbym to wyjaśnić, stwierdzając, że ... Próbki o niższym ziarnie (xs, sm) zachowują wygląd układu na mniejszych ekranach, a większe typy (md, lg) będą poprawnie wyświetlane tylko na większych ekranach, ale będą zawijać kolumny na mniejszych urządzeniach. Wartości podane w poprzednich przykładach odnoszą się do progu, w którym bootstrap obniża wygląd, aby pasował do dostępnej nieruchomości ekranu.

W praktyce oznacza to, że jeśli utworzysz kolumny col-xs-n, wówczas zachowają one poprawny wygląd nawet na bardzo małych ekranach, dopóki okno nie spadnie do rozmiaru, który jest tak restrykcyjny, że strona nie może zostać poprawnie wyświetlona. Powinno to oznaczać, że urządzenia o szerokości 768 pikseli lub mniejszej powinny pokazywać tabelę tak, jak ją zaprojektowałeś, a nie w formie zdegradowanej (pojedyncza lub owinięta kolumna). Oczywiście nadal zależy to od zawartości kolumn i o to właśnie chodzi. Jeśli strona spróbuje wyświetlić wiele kolumn dużych danych obok siebie na małym ekranie, kolumny naturalnie zawiną się w straszny sposób, jeśli nie uwzględnisz tego. Dlatego w zależności od danych w kolumnach możesz zdecydować, w którym miejscu poświęcony jest układ, aby odpowiednio wyświetlić zawartość.

np. jeśli strona zawiera trzy kolumny col-sm-n, program ładujący zawinie kolumny w wiersze, gdy szerokość strony spadnie poniżej 992px. Oznacza to, że dane są nadal widoczne, ale aby je wyświetlić, konieczne będzie przewijanie w pionie. Jeśli nie chcesz, aby twój układ ulegał degradacji, wybierz xs (o ile twoje dane mogą być odpowiednio wyświetlane na urządzeniu o niższej rozdzielczości w trzech kolumnach)

Jeśli pozioma pozycja danych jest ważna, powinieneś spróbować wybrać niższe wartości granulacji, aby zachować charakter wizualny. Jeśli pozycja jest mniej ważna, ale strona musi być widoczna na wszystkich urządzeniach, należy użyć wyższej wartości.

Jeśli wybierzesz col-lg-n, kolumny będą wyświetlane poprawnie, dopóki szerokość ekranu nie spadnie poniżej progu xs 1200px.


5
Wydaje mi się, że o to prosił OP (nie surowe liczby), ale się rozpaliły.
bvgheluwe

Zgadzam się, że to powinna być zaakceptowana odpowiedź, ponieważ dokładnie określa zachowanie różnych rozmiarów.
MeMeMax

10

Rozmiary urządzenia i prefiks klasy:

  • Bardzo małe urządzenia Telefony (<768px) - .col-xs-
  • Małe urządzenia Tablety (≥768px) - .col-sm-
  • Średnie urządzenia Komputery stacjonarne (≥992px) - .col-md-
  • Duże urządzenia Komputery stacjonarne (≥1200px) - .col-lg-

Opcje siatki:

System siatki Bootstarp

Odniesienie: system siatki


8

TL; DR

.col-X-YŚrodki w rozmiarze ekranu X i do góry , rozciągają się ten element, w celu wypełnienia kolumny Y .

Bootstrap zapewnia siatkę 12 kolumn na .row, więc Y = 3 oznacza szerokość = 25%.

xs, sm, md, lg to odpowiednio rozmiary smartfona, tabletu, laptopa i komputera stacjonarnego.

Określenie różnych szerokości dla różnych rozmiarów ekranu polega na tym, aby powiększyć na mniejszych ekranach.

Przykład

<div class="col-lg-6 col-xs-12">

Znaczenie: 50% szerokości na komputerach stacjonarnych, 100% szerokości na urządzeniach mobilnych, tabletach i laptopach.


6
.col-xs-Extra Small     Phones Less than 768px 
.col-sm-Small Devices   Tablets 768px and Up 
.col-md-Medium Devices  Desktops 992px and Up 
.col-lg-Large Devices   Large Desktops 1200px and Up 

1

Jeden szczególny przypadek: przed nauczeniem się systemu siatki ładowania początkowego upewnij się, że powiększenie przeglądarki jest ustawione na 100% (sto procent). Na przykład: jeśli rozdzielczość ekranu wynosi (1600px x 900px), a powiększenie przeglądarki wynosi 175%, wówczas elementy „bootstrap-ped” zostaną ułożone w stos.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Chrome zoom 100%

Przeglądarka 100 procent - elementy umieszczone poziomo

Powiększenie Chrome 175%

Przeglądarka 175 procent - ułożone elementy


1

Nie komplikujmy Bootstrap!

responsywne kolumny ładujące

Zauważ, jak col-sm zajmuje 100% szerokości (innymi słowy, przechodzi do nowej linii) poniżej, 576pxale col nie. Możesz zauważyć aktualną szerokość w górnej środkowej części w gif.

Oto kod:

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

Bootstrap domyślnie wyrównuje wszystkie kolumny (col) w jednym rzędzie o równej szerokości. W takim przypadku trzy colzajmą szerokość 100% / 3, niezależnie od wielkości ekranu. Możesz to zauważyć w gif.

Co teraz, jeśli chcemy wyrenderować tylko jedną kolumnę na linię, tj. Podać 100% szerokości każdej kolumnie, ale tylko dla mniejszych ekranów ? Teraz nadchodzą col-xxzajęcia!

Użyłem, col-smponieważ chciałem podzielić kolumny na osobne linie poniżej 576 pikseli. Te 4 col-xxklasy są dostarczane przez Bootstrap dla różnych urządzeń wyświetlających, takich jak telefony komórkowe, tablety, laptopy, duże monitory itp.

Więc col-smzłamałby się poniżej 576px, col-mdzłamałby poniżej 768px, col-lgzłamałby poniżej 992px i col-xlspadłby poniżej 1200px

Zauważ, że col-xsw bootstrap 4 nie ma klasy.

System siatki startowej

To prawie podsumowanie. Możesz wrócić do pracy.


Ale to coś więcej. Teraz przychodzi col-*i col-xx-*dostosowywania szerokości.

Pamiętaj, że w powyższym przykładzie wspomniałem o tym collub col-xxbierze równą szerokość z rzędu. Jeśli więc chcemy nadać konkretną szerokość, colmożemy to zrobić.

Rząd Bootstrap jest podzielony na 12 części, więc w powyższym przykładzie było ich 3, colwięc każda z nich zajmuje 12/3 = 4 części. Możesz rozważyć te części jako sposób pomiaru szerokości.

Możemy również napisać to w formacie col-*tj. W col-4ten sposób:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

I nie zrobiłoby to różnicy, ponieważ domyślnie bootstrap daje równą szerokość col(4 + 4 + 4 = 12).

Ale co jeśli chcemy dać 7 części 1 col, 3 części 2, cola resztę 2 części (12-7-3 = 2) 3 col(7 + 3 + 2, więc w sumie 12), możemy to po prostu zrobić:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

wprowadź opis zdjęcia tutaj

i możesz również dostosować szerokość col-xx-*klas.

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

wprowadź opis zdjęcia tutaj

Jak to wygląda w akcji?

responsywna siatka

Co jeśli suma coljest większa niż 12? Następnie colprzesunie się / dostosuje do dolnej linii. Tak, w wierszu może znajdować się dowolna liczba kolumn!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

wprowadź opis zdjęcia tutaj

Co jeśli chcemy 3 kolumny z rzędu dla dużych ekranów, ale podzielić te kolumny na 2 rzędy dla małych ekranów?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

wprowadź opis zdjęcia tutaj

Możesz się tutaj pobawić: https://jsfiddle.net/JerryGoyal/6vqno0Lm/



-1

służy do informowania bootstrap, ile kolumn ma być umieszczonych w rzędzie w zależności od rozmiaru ekranu -

col-xs-2

wyświetlałby tylko 2 kolumny z rzędu na bardzo małym ekranie (xs), w taki sam sposób, jak sm definiuje mały ekran, md (średni rozmiar), lg (duży rozmiar), ale zgodnie z bootstrap mniejszą pierwszą regułą, jeśli wspomniasz

xs-col-2 md-col-4

wtedy w każdym wierszu będą wyświetlane 2 kolumny dla rozmiarów ekranu od xs do sm (w zestawie) i zmieni się, gdy otrzyma następny rozmiar, tj. dla md do lg (w zestawie) dla lepszego zrozumienia rozmiarów ekranu, spróbuj uruchomić je w różnych trybach ekranu w tryb dewelopera chrome (ctr + shift + i) i wypróbuj różne piksele lub urządzenia

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.