Bootstrap 4 Siatka średnia

Przykład średniej siatki

W poprzednim rozdziale przedstawiliśmy przykład siatki z klasami dla małych urządzeń. Użyliśmy dwóch divów (kolumn) i podzieliliśmy je na 25%/75%:

Ale na średnich urządzeniach projekt może być lepszy jako podział 50%/50%.

Dla średnich urządzeń zastosujemy .col-md-*klasy:

Teraz Bootstrap powie „przy małym rozmiarze spójrz na klasy z -sm- i użyj ich. Przy średnim rozmiarze spójrz na klasy z -md- i użyj ich”.

Poniższy przykład spowoduje podział 25%/75% na małych urządzeniach i 50%/50% na średnich (i dużych i bardzo dużych) urządzeniach. Na bardzo małych urządzeniach automatycznie układa się w stos (100%):

Używanie tylko średniego

W poniższym przykładzie określamy tylko .col-md-6klasę (bez .col-sm-*). Oznacza to, że średnie, duże i bardzo duże urządzenia podzielą 50%/50% - ponieważ klasa rośnie. Jednak w przypadku małych i bardzo małych urządzeń będzie się układać pionowo (100% szerokości):

Kolumny z automatycznym układem

W Bootstrap 4 istnieje prosty sposób na utworzenie kolumn o równej szerokości dla wszystkich urządzeń: wystarczy usunąć numer z .col-md-*i użyć .col-mdklasy tylko na określonej liczbie elementów col . Bootstrap rozpozna, ile jest kolumn, a każda kolumna otrzyma taką samą szerokość.

Jeśli rozmiar ekranu jest mniejszy niż 768px , kolumny będą układać się poziomo:

Następny rozdział pokazuje, jak dodać inny procent podziału dla dużych urządzeń.