Bootstrap daim phiaj piv txwv

Cov kab sib chaws yooj yim kom tau txais koj paub txog kev tsim nyob hauv Bootstrap grid system.

Peb kab vaj huam sib luag

Tau peb kab sib npaug-dav pib ntawm desktops thiab scaling rau loj desktops . Ntawm cov khoom siv txawb, ntsiav tshuaj thiab hauv qab no, cov kab yuav cia li tso tseg.

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

Peb kab tsis sib npaug

Tau peb kab pib ntawm desktops thiab scaling rau desktops loj ntawm ntau qhov dav. Nco ntsoov, kab sib chaws yuav tsum ntxiv txog kaum ob rau ib qho kab rov tav thaiv. Ntau tshaj qhov ntawd, thiab txhua kab pib stacking tsis hais qhov chaw saib.

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

Ob kab

Tau txais ob kab pib ntawm desktops thiab scaling rau loj desktops .

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

Tag nrho dav, ib kem

Tsis muaj cov chav kawm kab sib chaws tsim nyog rau cov ntsiab lus dav dav.

Ob kab nrog ob kab nested

Raws li cov ntaub ntawv, kev ua zes yog ib qho yooj yim-tsuas yog muab ib kab ntawm kab hauv kab uas twb muaj lawm. Qhov no muab rau koj ob kab pib ntawm desktops thiab scaling rau loj desktops , nrog rau lwm ob (sib npaug widths) nyob rau hauv lub loj kem.

Ntawm qhov ntau thiab tsawg ntawm cov khoom siv txawb, cov ntsiav tshuaj thiab qis, cov kab no thiab lawv cov kab ke zes yuav pawg.

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

Mixed: mobile thiab desktop

Lub Bootstrap 3 kab sib chaws muaj plaub theem ntawm cov chav kawm: xs (xov tooj), sm (ntsiav tshuaj), md (desktops), thiab lg (loj desktops). Koj tuaj yeem siv yuav luag txhua qhov kev sib xyaw ntawm cov chav kawm no los tsim kom muaj kev sib tw thiab hloov tau yooj yim.

Txhua qib ntawm cov chav kawm nce, lub ntsiab lus yog tias koj npaj rau kev teeb tsa tib qhov dav rau xs thiab sm, koj tsuas yog yuav tsum qhia xs.

txz -> ../All-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, ntsiav tshuaj, thiab 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

Kem clearing

Ntshiab floats ntawm cov ntsiab lus tshwj xeeb kom tsis txhob muaj qhov txawv txav nrog cov ntsiab lus tsis sib xws.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, thawb, thiab rub rov pib dua

Pib dua offsets, thawb, thiab rub ntawm cov ntsiab lus tshwj xeeb.

.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