Na ebben van az ugrós (nem fluid) container
Ez a két oszlop mindenképpen a viewport felét foglalja el:
Most még nem responisive. A képernyőt 12 egyforma széles részre osztom, a méretezés már hasznája a 12-es felosztást:
Itt most minden annyi 12-edet használ, amennyit előírtunk neki!
Most lesz kicsit responsive:
md: közepes képernyőn, vagy annál nagyobbon 6 egységet a 12-ből, de az alatt teljes szélességet kérek.
Most lesz nagyon responsive:
lg nagy képernyőn 4 oszlop jelenjen meg => 3 egység a 12-ből (12/4=3 col-lg-3),
md közepes képernyőn 3 oszlop jelenjen meg => 4 egység a 12-ből (12/3=4 col-md-4),
sm kicsi képernyőn 2 oszlop jelenjen meg => 6 egység a 12-ből (12/2=6 col-sm-6)
Gyakorlás
Megpróbáljuk leutánozni az Airbnb működését. Minnél kisebb a képernyő, annál kevesebb képet mutat meg.
Csináljuk meg a következő elrendezést: 6 oszlop (6 kép) a nagy, 4 oszlop (4 kép) a közepes, 1 oszlop a kicsi kérpernyőn:
lg nagy képernyőn 6 oszlop => 2 egység a 12-ből (12/6=2 col-lg-2),
md közepes képernyőn 4 oszlop => 3 egység (12/4=3 col-md-3),
sm képernyőn 1 oszlop => 12 egység (12/1=12 col-sm-12)