Bootstrap grid mienzaniso

Basic grid marongero kuti iwe ujairane nekuvaka mukati meBootstrap grid system.

Mumienzaniso iyi .themed-grid-colkirasi inowedzerwa kumakoramu kuwedzera mamwe madingindira. Iyi haisi kirasi inowanikwa muBootstrap nekukasira.

Matanho mashanu egridi

Kune matavi mashanu kuBootstrap grid system, imwe yega yega yemhando yemidziyo yatinotsigira. Imwe neimwe tier inotanga padiki yekuona saizi uye inoshanda otomatiki kumidziyo mikuru kunze kwekunge yakadhindwa.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

Makoramu matatu akaenzana

Tora makoramu matatu akaenzana-akaenzana kutangira pamatafura uye kukwira kumatafura makuru . Pane nharembozha, mahwendefa uye pazasi, makoramu anozomira otomatiki.

.col-md-4
.col-md-4
.col-md-4

Mamwe makoramu matatu akaenzana

Nekushandisa .row-cols-*makirasi, unogona nyore kugadzira grid ine makoramu akaenzana.

.colmwana we .row-cols-md-3
.colmwana we .row-cols-md-3
.colmwana we .row-cols-md-3

Makoramu matatu asina kuenzana

Tora makoramu matatu kutanga pamatafura uye kukwira kune mahombe desktops ehupamhi hwakasiyana. Rangarira, grid columns dzinofanira kuwedzera kusvika gumi nembiri kune imwechete yakachinjika block. Kupfuura izvozvo, uye makoramu anotanga kurongedza zvisinei nenzvimbo yekutarisa.

.com-md-3
.col-md-6
.com-md-3

Makoramu maviri

Tora makoramu maviri kutanga pamatafura uye kukwira kumatafura makuru .

.col-md-8
.col-md-4

Upamhi hwakazara, koramu imwe chete

Hapana makirasi egridi anodiwa kune yakazara-hupamhi zvinhu.

Makoramu maviri ane makoramu maviri ane madendere

Maererano nezvinyorwa, kugadzira dendere kuri nyore-ingoisa mutsara wemakoramu mukati mechikamu chiripo. Izvi zvinokupa makoramu maviri kutanga pamatafura uye kukwira kune mahombe desktops , aine mamwe maviri (akaenzana upamhi) mukati meiyo huru column.

Pamasaizi emudziyo wenhare, mahwendefa uye pasi, makoramu aya nemakoramu awo akaiswa madendere achaungana.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Yakasanganiswa: nhare uye desktop

Iyo Bootstrap v5 grid system ine matavi matanhatu emakirasi: xs (yakawedzera diki, iyi kirasi infix haisi kushandiswa), sm (diki), md (pakati), lg (huru), xl (x-hombe), uye xxl (xx -guru). Iwe unogona kushandisa chero musanganiswa weaya makirasi kugadzira mamwe ane simba uye anochinjika marongero.

Imwe neimwe nhanho yemakirasi inokwira kumusoro, zvichireva kuti kana ukaronga pakuisa hupamhi hwakafanana hwemd, lg, xl uye xxl, unongoda kutsanangura md.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Yakasanganiswa: nhare, piritsi, uye desktop

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

Gutters

Nemakirasi .gx-*, mabheji akatwasuka anogona kugadziriswa.

.colnemigero .gx-4_
.colnemigero .gx-4_
.colnemigero .gx-4_
.colnemigero .gx-4_
.colnemigero .gx-4_
.colnemigero .gx-4_

Shandisa .gy-*makirasi kudzora vertical gutters.

.colnemigero .gy-4_
.colnemigero .gy-4_
.colnemigero .gy-4_
.colnemigero .gy-4_
.colnemigero .gy-4_
.colnemigero .gy-4_

Nemakirasi .g-*, magita mumativi ese ari maviri anogona kugadziriswa.

.colnemigero .g-3_
.colnemigero .g-3_
.colnemigero .g-3_
.colnemigero .g-3_
.colnemigero .g-3_
.colnemigero .g-3_

Containers

Mamwe makirasi akawedzerwa muBootstrap v4.4 anobvumira midziyo ine 100% yakafara kusvika pane imwe nzvimbo yekutyora. v5 inowedzera imwe xxlbreakpoint.

.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid