Bootstrap grid mienzaniso

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

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

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 3 grid system ine mana tiers emakirasi: xs (nhare), sm (mapiritsi), md (desktop), uye lg (mahombe desktops). 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 hwe xs uye sm, iwe unongoda kutsanangura xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Yakasanganiswa: nhare, piritsi, uye desktop

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

Column clearing

Bvisa zvinoyangarara panzvimbo dzakatarwa kudzivirira kuputira zvisina kuenzana nezvinhu zvisina kuenzana.

.col-xs-6 .col-sm-3
Resize your viewport kana tarisa pafoni yako semuenzaniso.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, uye dhonza rets

Reset offsets, kusunda, uye kudhonza pane chaiyo breakpoints.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0