Safu tatu sawa

Pata safu wima tatu za upana sawa kuanzia kwenye eneo-kazi na kuongeza eneo-kazi kubwa . Kwenye vifaa vya mkononi, kompyuta kibao na chini, safu wima zitapangwa kiotomatiki.

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

Safu tatu zisizo sawa

Pata safu wima tatu kuanzia kompyuta za mezani na kuongeza hadi eneo-kazi kubwa za upana mbalimbali. Kumbuka, safu wima za gridi zinapaswa kuongezwa hadi kumi na mbili kwa kizuizi kimoja cha mlalo. Zaidi ya hayo, na safu wima huanza kupangwa bila kujali eneo la kutazama.

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

Safu mbili

Pata safu wima mbili kuanzia kwenye kompyuta za mezani na kuongeza hadi eneo-kazi kubwa .

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

Upana kamili, safu wima moja

Hakuna darasa za gridi zinazohitajika kwa vipengele vya upana kamili.


Safu mbili zilizo na safu wima mbili

Kulingana na hati, kuweka kiota ni rahisi—weka tu safu mlalo ndani ya safu wima iliyopo. Hii hukupa safu wima mbili kuanzia kwenye dawati na kuongeza hadi eneo-kazi kubwa , na nyingine mbili (upana sawa) ndani ya safu kubwa zaidi.

Katika saizi za vifaa vya mkononi, kompyuta kibao na chini, safu wima hizi na safu wima zao zilizowekwa zitapangwa.

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

Mchanganyiko: simu na eneo-kazi

Mfumo wa gridi ya Bootstrap 3 una viwango vinne vya madarasa: xs (simu), sm (kompyuta kibao), md (desktops), na lg (koptop kubwa zaidi). Unaweza kutumia karibu mchanganyiko wowote wa madarasa haya ili kuunda mipangilio inayobadilika zaidi na inayonyumbulika.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify 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, and 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

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

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

Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific 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