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

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">

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

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

Obejmuje również mieszanki itp.

„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

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!

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

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