Mehlala ea grid ea Bootstrap

Mehaho ea mantlha ea grid ho u tloaelana le moaho ka har'a sistimi ea grid ea Bootstrap.

Mehlaleng ena .themed-grid-colsehlopha se eketsoa likholomong ho kenyelletsa lihlooho tse ling. Sena ha se sehlopha se fumanehang ho Bootstrap ka ho sa feleng.

Li-grid tse hlano

Ho na le mekhahlelo e mehlano ho sistimi ea grid ea Bootstrap, e le 'ngoe bakeng sa mofuta o mong le o mong oa lisebelisoa tseo re li tšehetsang. Karolo e 'ngoe le e 'ngoe e qala ka boholo ba bonyane ba sebaka sa pono 'me e sebetsa ka bo eona ho lisebelisoa tse kholo ntle le haeba e fetisitsoe.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Litšiea tse tharo tse lekanang

Fumana likholomo tse tharo tse bophara bo lekanang ho qala ho li-desktops le ho ea ho li-desktops tse kholo . Ho lisebelisoa tsa cellular, matlapa le ka tlase, likholomo li tla ikamahanya le maemo.

.col-md-4

Likholomo tse tharo tse lekanang

Ka ho sebelisa .row-cols-*litlelase, o ka etsa marang-rang habonolo ka litšiea tse lekanang.

.colngoana oa .row-cols-md-3

Litšiea tse tharo tse sa lekanang

Fumana litšiea tse tharo ho qala ho li-desktops le ho ea ho li-desktops tse kholo tsa bophara bo fapaneng. Hopola, litšiea tsa grid li lokela ho fihla ho leshome le metso e 'meli bakeng sa boloko bo le bong bo otlolohileng. Ho feta moo, 'me likholomo li qala ho bokellana ho sa tsotelehe sebaka sa pono.

.col-md-3

.col-md-6

.col-md-3

Litšiea tse peli

Fumana litšiea tse peli ho qala ho li-desktops le ho ea ho li-desktops tse kholo .

.col-md-8

.col-md-4

Bophara bo felletseng, kholomo e le 'ngoe

Ha ho litlelase tsa grid tse hlokahalang bakeng sa likarolo tse felletseng.

Litšiea tse peli tse nang le litšiea tse peli

Ho ea ka litokomane, ho haha sehlaha ho bonolo - beha feela mela e mengata ka har'a kholomo e teng. Sena se u fa likholomo tse peli ho qala ho li-desktops le ho hola ho li-desktops tse kholo , ka tse ling tse peli (bophara bo lekanang) ka har'a kholomo e kholoanyane.

Ka boholo ba lisebelisoa tsa mohala, matlapa le tlase, litšiea tsena le litšiea tsa tsona tse behiloeng li tla bokellana.

.col-md-8

.col-md-6

.col-md-4

E kopantsoe: mobile le desktop

Sistimi ea grid ea Bootstrap v5 e na le mekhahlelo e tšeletseng ea lihlopha: xs (e nyane haholo, infix ea sehlopha sena ha e sebelisoe), sm (e nyane), md (bohareng), lg (e kholo), xl (x-kholo), le xxl (xx). -kholo). U ka sebelisa hoo e batlang e le motsoako ofe kapa ofe oa lihlopha tsena ho theha meralo e matla le e feto-fetohang.

Sehlopha se seng le se seng sa lihlopha sea phahama, ho bolelang hore haeba u rera ho beha bophara bo lekanang bakeng sa md, lg, xl le xxl, u hloka feela ho hlakisa md.

.col-md-8

.col-6 .col-md-4

.col-6

Li kopane: mobile, tablet, le desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Lithako

Ka .gx-*lihlopha, li-gutters tse rapameng li ka fetoloa.

.cole nang le .gx-4lithapo

Sebelisa .gy-*litlelase ho laola li-gutter tse emeng.

.cole nang le .gy-4lithapo

Ka .g-*lihlopha, li-gutters ka mahlakoreng ka bobeli li ka fetoloa.

.cole nang le .g-3lithapo

Lijana

Litlelase tse ling tse kenyellelitsoeng ho Bootstrap v4.4 li lumella lijana tse bophara ba 100% ho fihlela sebaka se itseng. v5 e eketsa ntlha e ncha xxl.

.setshelo

.setshelo-sm

.setshelo-md

.setshelo-lg

.setshelo-xl

.setshelo-xxl

.setshelo-mokelikeli