Tre kolona të barabarta

Merrni tre kolona me gjerësi të barabartë duke filluar nga desktopët dhe duke u shkallëzuar në desktopët e mëdhenj . Në pajisjet celulare, tabletët dhe më poshtë, kolonat do të grumbullohen automatikisht.

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

Tre kolona të pabarabarta

Merrni tre kolona duke filluar nga desktopët dhe duke u shkallëzuar në desktop të mëdhenj me gjerësi të ndryshme. Mbani mend, kolonat e rrjetit duhet të shtojnë deri në dymbëdhjetë për një bllok të vetëm horizontal. Më shumë se kaq, dhe kolonat fillojnë të grumbullohen pa marrë parasysh pamjen.

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

Dy kolona

Merrni dy kolona duke filluar nga desktopët dhe duke u shkallëzuar në desktop të mëdhenj .

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

Gjerësia e plotë, kolona e vetme

Asnjë klasë rrjeti nuk është e nevojshme për elementët me gjerësi të plotë.


Dy kolona me dy kolona të mbivendosura

Sipas dokumentacionit, foleja është e lehtë - thjesht vendosni një rresht kolonash brenda një kolone ekzistuese. Kjo ju jep dy kolona që fillojnë në desktop dhe shkallëzohen në desktop të mëdhenj , me dy të tjera (gjerësi të barabarta) brenda kolonës më të madhe.

Në madhësitë e pajisjes celulare, tabletët dhe më poshtë, këto kolona dhe kolonat e tyre të mbivendosura do të grumbullohen.

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

Të përziera: celular dhe desktop

Sistemi i rrjetit Bootstrap 3 ka katër nivele klasash: xs (telefonat), sm (tabletat), md (tavolinat e punës) dhe lg (desktopët më të mëdhenj). Ju mund të përdorni pothuajse çdo kombinim të këtyre klasave për të krijuar paraqitje më dinamike dhe fleksibël.

Çdo nivel i klasave rritet, që do të thotë nëse planifikoni të vendosni të njëjtat gjerësi për xs dhe sm, ju duhet vetëm të specifikoni 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

Të përziera: celular, tablet dhe 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

Pastrimi i kolonës

Pastroni notat në pika të veçanta për të parandaluar mbështjelljen e vështirë me përmbajtje të pabarabartë.

.col-xs-6 .col-sm-3 Ndryshoni madhësinë e portit
tuaj të pamjes ose shikoni atë në telefonin tuaj për një shembull.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Kompensimi, shtytja dhe tërheqja rivendoset

Rivendos kompensimet, shtytjet dhe tërheqjet në pika të veçanta ndërprerjeje.

.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