Bootstrap Grid - Medium Devices

Bootstrap Exemplu Grid: Medium Devices

În capitolul precedent, am prezentat un exemplu grila cu clase pentru dispozitive mici. Am folosit două divuri (columns) și le - am dat un 25%/75% divizat:

Dar pe dispozitive medii de proiectare poate fi mai bine ca 50%/50% divizat.

Sfat: Dispozitivele medii sunt definite ca având o lățime de ecran de la 992 pixeli la 1199 pixeli.

Pentru dispozitivele medii vom folosi .col-md-* clase.

Acum vom adăuga lățimile coloanelor pentru dispozitive medii:

Acum Bootstrap va spune „la dimensiunea mică, uita - te la clase cu -sm- în ele și de a folosi cele. La marime medie, uita - te la clase cu -md- în ele și de a folosi acele“.

Următorul exemplu va avea ca rezultat o 25%/75% divizat pe dispozitive mici și 50%/50% divizat pe medii (and large) dispozitive. Pe dispozitive suplimentare mici, acesta va stivui automat (100%) :

Utilizarea Numai mediu

In exemplul de mai jos, vom specifica doar .col-md-6 clasa (without .col-sm-* ) a (without .col-sm-* ) . Acest lucru înseamnă că dispozitivele medii și mari vor împărți 50%/50% - deoarece clasa scalează sus. Cu toate acestea, pentru dispozitive mici, va stivă verticală (100% width) :

Următorul capitol arată cum să adăugați un procent divizat diferit pentru dispozitive mari.