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.
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 ..
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.
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.
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?
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.
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.
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.
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.
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:
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
px
wymiarów każdego z nich.bootstrap-3
ibootstrap-4
jako tag, ponieważ są one zupełnie różneOdpowiedzi:
Zaktualizowano 2019 ...
Bootstrap 3 siatka jest w 4 warstwach (lub „pułapki”) ...
.col-xs-*
).col-sm-*
).col-md-*
).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-3
ma szerokość 3 z 12 kolumn (25%) na typowej małej szerokości urządzenia (> 768 pikseli)col-md-3
ma szerokość 3 z 12 kolumn (25%) na typowej średniej szerokości urządzenia (> 992 pikseli)Mniejszy poziom (
xs
,sm
imd
) 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-3
oznacza3 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 przezsm
> przesłonięty przezmd
> 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
,md
alg
kratki wszystkich „komin” pionowo na ekranie / okien z mniej niż 768. W tym miejscuxs
mieści się siatka. Kolumny korzystające zcol-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 prostucol-1
,col-2
..col-12
itd ..col-*
- 0 (xs)col-sm-*
- 576pxcol-md-*
- 768pxcol-lg-*
- 992pxcol-xl-*
- 1200pxBootstrap 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
źródło
sm
pozostają w kolumnach na węższych szerokościach. Spróbuj sam: codeply.com/go/LGyFiEJqXq<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)?<div class="col-lg-3 col-md-3 col-sm-3">..</div>
jest taki sam jak<div class="col-sm-3">..</div>
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.
źródło
Z dokumentacji Bootstrap na Twitterze :
.col-sm-*
,.col-md-*
,.col-lg-*
.źródło
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.
źródło
Rozmiary urządzenia i prefiks klasy:
.col-xs-
.col-sm-
.col-md-
.col-lg-
Opcje siatki:
Odniesienie: system siatki
źródło
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
Znaczenie: 50% szerokości na komputerach stacjonarnych, 100% szerokości na urządzeniach mobilnych, tabletach i laptopach.
źródło
źródło
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
Chrome zoom 100%
Przeglądarka 100 procent - elementy umieszczone poziomo
Powiększenie Chrome 175%
Przeglądarka 175 procent - ułożone elementy
źródło
Nie komplikujmy Bootstrap!
Zauważ, jak col-sm zajmuje 100% szerokości (innymi słowy, przechodzi do nowej linii) poniżej,
576px
ale col nie. Możesz zauważyć aktualną szerokość w górnej środkowej części w gif.Oto kod:
Bootstrap domyślnie wyrównuje wszystkie kolumny (col) w jednym rzędzie o równej szerokości. W takim przypadku trzy
col
zajmą 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-xx
zajęcia!Użyłem,
col-sm
ponieważ chciałem podzielić kolumny na osobne linie poniżej 576 pikseli. Te 4col-xx
klasy 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-sm
złamałby się poniżej 576px,col-md
złamałby poniżej 768px,col-lg
złamałby poniżej 992px icol-xl
spadłby poniżej 1200pxTo prawie podsumowanie. Możesz wrócić do pracy.
Ale to coś więcej. Teraz przychodzi
col-*
icol-xx-*
dostosowywania szerokości.Pamiętaj, że w powyższym przykładzie wspomniałem o tym
col
lubcol-xx
bierze równą szerokość z rzędu. Jeśli więc chcemy nadać konkretną szerokość,col
możemy to zrobić.Rząd Bootstrap jest podzielony na 12 części, więc w powyższym przykładzie było ich 3,
col
wię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. Wcol-4
ten sposób: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,col
a resztę 2 części (12-7-3 = 2) 3col
(7 + 3 + 2, więc w sumie 12), możemy to po prostu zrobić:i możesz również dostosować szerokość
col-xx-*
klas.Jak to wygląda w akcji?
Co jeśli suma
col
jest większa niż 12? Następniecol
przesunie się / dostosuje do dolnej linii. Tak, w wierszu może znajdować się dowolna liczba kolumn!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?
źródło
Myślę, że ten obraz jest całkiem dobry, aby lepiej zrozumieć tę koncepcję!
dla bardziej szczegółowego zrozumienia proszę przejść poniżej link:
https://getbootstrap.com/docs/3.4/css/
źródło
służy do informowania bootstrap, ile kolumn ma być umieszczonych w rzędzie w zależności od rozmiaru ekranu -
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
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
źródło