Mam problemy z Bootstrap's Grid na różnych urządzeniach. Zgodnie z dokumentacją Bootstrap, rozmiary kolumn w HTML są zależne od rozmiaru okna urządzenia. Na przykład.:

Bardzo mały 576px , Mały >= 768px , Średni >= 992px , Duży >=1200px

Jednak urządzenie, które powinno być uważane za średnie (obrócony iPad o wymiarach 1024 x 768 w narzędziach programistycznych Google Chrome), jest uważany za duże urządzenie przez Bootstrap. Mój kod wygląda tak:

<div class="col-lg-2 col-md-4 col-sm-4">

W rotacji poziomej iPad miał div w rozmiarze kolumny 2, co nie powinno mieć miejsca. Zrobiłem test dziennika konsoli, aby sprawdzić rozmiar ekranu i rzeczywiście okazało się, że wynosi 1024px. Jakieś pomysły, dlaczego tak się dzieje?

0
Danchat 8 listopad 2018, 22:51

1 odpowiedź

Najlepsza odpowiedź

Problem polega na tym, że twoja matematyka jest nieco niezgodna ze sposobem, w jaki Bootstrap oblicza swój punkt przerwania, myląc duży punkt przerwania (>= 992px) z bardzo dużym punktem przerwania (>= 1200px).

Chociaż Twój iPad nie należy do bardzo dużego punktu przerwania (który używa prefiksu .col-xl-), to należy do dużego punkt przerwania (który używa prefiksu .col-lg-), a zatem klasa .col-lg-2 jest poprawnie zastosowana. Dlatego twój element zajmuje dwie kolumny.

Zobacz poniższy obraz, aby uzyskać przydatną listę punktów przerwania i odpowiadających im klas:

enter image description here

1
Obsidian Age 8 listopad 2018, 22:59