Zrozumienie klas siatki (col-sm- # i col-lg- #) w Bootstrap 3

85

Rozpoczynam pracę w Bootstrap 3 i mam pewne problemy ze zrozumieniem, w jaki sposób mają być używane klasy grid.

Oto, do czego doszedłem do tej pory:

Wygląda na to, że klasy col-sm-#i col-lg-#różnią się od zwykłych starych col-#tym, że będą miały zastosowanie tylko wtedy, gdy ekrany mają określony rozmiar (odpowiednio 768px i 992px). Jeśli pominiesz -sm- lub -lg-, elementy div nigdy nie zostaną zwinięte do jednej kolumny.

Jednak, gdy tworzę dwa div wewnątrz rzędu, które są zarówno col-sm-6wydaje się, że są tylko obok siebie, gdy okno jest między 768px i 992px szerokości. Innymi słowy, jeśli kurczyć przez okno w dół, a następnie powoli ją poszerzyć, układ jest pojedyncza kolumna, a następnie dwie kolumny, a następnie z powrotem do pojedynczej kolumny ponownie .

  1. Czy to zamierzone zachowanie?
  2. Jeśli chcę mieć dwie kolumny na coś powyżej 768 pikseli, czy powinienem zastosować obie klasy? ( <div class="col-sm-6 col-lg-6">)
  3. Powinien col-6 również zostać uwzględniony?<div class="col-6 col-sm-6 col-lg-6">
html  css  twitter-bootstrap  twitter-bootstrap-3 
— emersonthis
źródło
Przeczytaj tabelę: getbootstrap.com/css/#grid # 1 - Jest to zamierzone zachowanie, ponieważ używa @mediado określonych rozmiarów. # 2 i # 3 tak, przeczytaj „Przykład: łączenie telefonu komórkowego z komputerem stacjonarnym” i „Przykład: telefon komórkowy, tablet i komputer stacjonarny”
— RaphaelDDL,
@RaphaelDDL Thanks. Zrozumiałem to wkrótce po opublikowaniu. Myślę, że spodziewałem się, że v3 zachowuje się jak "bootstrap-responsive.css" v2, a tak nie jest.
— emersonthis
— Bass Jobsen

Odpowiedzi:

60

[ZAKTUALIZUJ PONIŻEJ]

Przyjrzałem się ponownie dokumentom i wydaje się, że przeoczyłem sekcję, która mówi konkretnie o tym.

Odpowiedzi na moje pytania:

  1. Tak, mają one dotyczyć tylko określonych zakresów, a nie wszystkiego, co przekracza określoną szerokość.

  2. Tak, zajęcia mają być łączone.

  3. Wydaje się, że jest to właściwe w niektórych przypadkach, ale nie w innych, ponieważ klasy col- # są w zasadzie równoważne z col-xsm- # lub szerokościami powyżej 0px (wszystkie szerokości).

Poza czytaniem dokumentów zbyt szybko, myślę, że byłem zdezorientowany, ponieważ przyszedłem do Bootstrap 3 z "mentalnością Bootstrap 2". W szczególności używałem (opcjonalnych) stylów responsywnych (bootstrap-responsive.css) w wersji 2, a wersja 3 jest całkiem inna (dla lepszego IMO).

UPDATE dla stabilnej wersji:

To pytanie zostało pierwotnie napisane, gdy RC1 był niedostępny. Wprowadzili kilka poważnych zmian w RC2, więc dla każdego, kto to teraz czyta, nie wszystko, o czym wspomniano powyżej, nadal obowiązuje.

W chwili, gdy to piszę, col-*-#klasy DO wydają się być stosowane w górę. Na przykład, jeśli chcesz, aby element miał 12 kolumn (pełna szerokość) dla telefonów, ale dwie 6 kolumn (pół strony) dla tabletów i nowszych, możesz zrobić coś takiego:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(Po napisaniu tego pytania dodali również dodatkowy punkt przerwania xs).

— emersonthis
źródło
Wydaje się, że hiperłącze wskazuje na nieistniejącą obecnie stronę. Nie jestem pewien, czy należy go zaktualizować, aby wskazywał link podany powyżej @RaphaelDDL - getbootstrap.com/css/#grid - czy też inny link?
— Jon Schneider,
Dzięki za pytanie i odpowiedź. Nie jestem facetem od CSS, a konfiguracja sieci początkowo była dla mnie myląca. Ale jeśli to, co mówisz, jest prawdą, wydaje się, że lepiej jest użyć po prostu xs i pozwolić, aby wszystko miało zastosowanie w górę.
— Mike Purcell,
39

Tutaj masz bardzo dobry samouczek, który wyjaśnia, jak używać nowych klas grid w Bootstrap 3.

Obejmuje również mieszanki itp.

— Srikanth
źródło
2
Link do bloga szczegółowo opisuje siatkę Bootstrap 3, w tym 4 klasy rozmiaru, takie jak col-xs- *. Zawiera dobre przykłady kodu.
— Catto,
2
To bardzo dobre, zwłaszcza jego styl ciągłego zachęcania do wytrwałości; „Przydatne, prawda? Nie? Nie wiem? Jedźmy dalej!” a także wyjaśnianie rzeczy w odpowiednich zdaniach: „To w zasadzie mówi:„ trzymaj mnie przy szerokości 6 kolumn, aż do rozmiaru telefonu, nigdy nie przełączaj mnie na układ mobilny ” . Dzięki za wysłanie wiadomości
— slugmandrew
5

„Jeśli chcę mieć dwie kolumny dla czegoś większego niż 768px, czy powinienem zastosować obie klasy?”

Powinno to być tak proste, jak: 

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

Nie musisz też dodawać col-lg-6.

Wersja demonstracyjna: http://www.bootply.com/73119

— Zim
źródło
Z powodów, których jeszcze nie potrafię wyjaśnić, nie działa to w moim przypadku. .col-sm-6wydaje się mieć zastosowanie tylko do tego konkretnego zakresu szerokości (nie wszystkiego powyżej)
— emersonthis
5

Najlepszym sposobem na zrozumienie jest po prostu myślenie od góry do dołu (od dużych komputerów stacjonarnych po telefony komórkowe)

Po pierwsze, ponieważ B3 jest najpierw mobilny, więc jeśli użyjesz xs, kolumny będą takie same od dużych komputerów stacjonarnych do xs (zalecam używanie xs lub sm, ponieważ pozwoli to zachować wszystko tak, jak chcesz na każdym rozmiarze ekranu)

Po drugie, jeśli chcesz nadać różną szerokość kolumnom na różnych urządzeniach lub rozdzielczościach, możesz dodać wiele klas, np

powyższe spowoduje zmianę szerokości zgodnie z rozdzielczościami ekranu, PAMIĘTAJ, że utrzymuję łączną liczbę kolumn w każdej klasie = 12

Mam nadzieję, że moja odpowiedź pomoże!

— Aslam
źródło
5

Aby zmienić powyższą odpowiedź SDP, NIE musisz deklarować col-xs-12w <div class="col-xs-12 col-sm-6">. Bootstrap 3 jest nastawiony przede wszystkim na urządzenia mobilne, więc domyślnie zakłada się, że każda kolumna div jest elementem div o szerokości 100% - co oznacza, że ​​przy rozmiarze „xs” jest to 100% szerokości, zawsze będzie to zachowanie domyślne, niezależnie od tego, co ustawisz sm, md, lg. Jeśli chcesz, aby xskolumny nie były w 100%, zwykle robisz col-xs-(1-11).

— cześć
źródło
0

To może być późno, ponieważ myślę, że większość z nas używa BS4. W tym artykule szczegółowo i w prosty sposób wyjaśniono wszystkie zadane przez Ciebie pytania, a także podano, co należy zrobić, kiedy. Szczegółowy przewodnik dotyczący korzystania z bs4 lubbootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7

— AAA
źródło
rozważ umieszczenie odpowiednich informacji z linku w miejscu przeznaczonym na odpowiedź.
— sao
Jedynym powodem, dla którego zamieściłem link, było to, że pomocne było dla mnie rozpoczęcie czytania artykułu od góry. Wtedy ma to sens.
— AAA
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.