Mga pananglitan sa bootstrap grid

Panguna nga mga layout sa grid aron pamilyar ka sa pagtukod sulod sa sistema sa grid sa Bootstrap.

Tulo ka managsama nga mga kolum

Pagkuha og tulo ka managsama nga gilapdon nga mga kolum sugod sa mga desktop ug pag-scale sa dagkong mga desktop . Sa mga mobile device, mga tablet ug sa ubos, ang mga kolum awtomatikong mag-stack.

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

Tulo ka dili patas nga mga kolum

Pagkuha og tulo ka mga kolum sugod sa mga desktop ug pag-scale ngadto sa dagkong mga desktop nga lainlain ang gilapdon. Hinumdomi, ang mga kolum sa grid kinahanglan nga magdugang hangtod sa dose alang sa usa ka pinahigda nga bloke. Labaw pa niana, ug ang mga kolum nagsugod sa pag-stack bisan unsa pa ang viewport.

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

Duha ka kolum

Pagkuha og duha ka kolum sugod sa mga desktop ug pag-scale sa dagkong mga desktop .

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

Bug-os nga gilapdon, usa ka kolum

Wala'y mga klase sa grid nga gikinahanglan alang sa mga elemento nga puno sa gilapdon.

Duha ka kolum nga adunay duha ka nested column

Sumala sa dokumentasyon, sayon ​​ra ang pagpugad—butang lang ug laray sa mga column sulod sa kasamtangang column. Naghatag kini kanimo og duha ka kolum sugod sa mga desktop ug pag-scale sa dagkong mga desktop , nga adunay laing duha (parehas nga gilapdon) sulod sa mas dako nga kolum.

Sa mga gidak-on sa mobile device, mga tablet ug paubos, kini nga mga kolum ug ang ilang mga salag nga mga kolum mag-stack.

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

Mixed: mobile ug desktop

Ang Bootstrap 3 grid system adunay upat ka hut-ong sa mga klase: xs (mga telepono), sm (mga tablet), md (desktop), ug lg (mas dagkong mga desktop). Mahimo nimong gamiton ang halos bisan unsang kombinasyon niini nga mga klase aron makahimo og mas dinamiko ug flexible nga mga layout.

Ang matag hut-ong sa mga klase nag-scale, nagpasabot nga kung nagplano ka nga magbutang sa parehas nga gilapdon alang sa xs ug sm, kinahanglan ra nimo nga itakda ang 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

Mixed: mobile, tablet, ug desktop

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

Paglimpyo sa kolum

Tin-aw nga mga float sa piho nga mga breakpoint aron malikayan ang dili maayo nga pagputos nga adunay dili patas nga sulud.

.col-xs-6 .col-sm-3 Usba ang gidak-on sa
imong viewport o tan-awa kini sa imong telepono alang sa pananglitan.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Pag-offset, pagduso, ug pagbitad pag-reset

I-reset ang mga offset, pagduso, ug pagbira sa piho nga mga breakpoint.

.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