Bootstrap grid nhwɛso ahorow

Basic grid layouts a ɛbɛma woahu adansi wɔ Bootstrap grid nhyehyɛe no mu.

Wɔ saa nhwɛso ahorow yi mu no wɔde .themed-grid-coladesuakuw no aka nkyerɛwde ahorow no ho de asɛmti bi aka ho. Eyi nyɛ adesua a ɛwɔ Bootstrap mu default so.

Grid tiers anum

Tiers anum na ɛwɔ Bootstrap grid nhyehyɛe no mu, biako ma mfiri ahorow biara a yɛboa. Tier biara fi ase wɔ viewport kɛse a esua koraa na ɛyɛ adwuma ankasa wɔ mfiri akɛse no so gye sɛ wɔabu so.

.col-4 na ɛwɔ hɔ

.kol-sm-4 na ɛwɔ hɔ

.kol-md-4 na ɛwɔ hɔ

.col-lg-4 na ɛwɔ hɔ

.col-xl-4 na ɛwɔ hɔ

.kol-xxl-4 na ɛwɔ hɔ

Nnua abiɛsa a ɛyɛ pɛ

Nya nkyerɛwde abiɛsa a ne tɛtrɛtɛ yɛ pɛ a efi ase wɔ desktop so na ɛkɔ desktop akɛse so . Wɔ mobile devices, tablets ne ase hɔ no, columns no bɛboaboa ano ankasa.

.kol-md-4 na ɛwɔ hɔ

Nnua abiɛsa a ɛyɛ pɛ a wɔde si ananmu

Ɛdenam .row-cols-*adesua ahorow no a wode bedi dwuma so no, ɛnyɛ den sɛ wubetumi ayɛ grid a ɛwɔ nkyerɛwde a ɛyɛ pɛ.

.colabofra a ɔyɛ .row-cols-md-3

Adum abiɛsa a ɛnyɛ pɛ

Nya columns abiɛsa a efi ase wɔ desktops na scaling kɔ desktop akɛse a ne tɛtrɛtɛ ahorow so. Kae sɛ, ɛsɛ sɛ grid columns no ka dumien ho ma horizontal block biako. Nea ɛboro saa, na columns fi ase stacking ɛmfa ho viewport.

.col-md-3 na ɛwɔ hɔ

.kol-md-6 na ɛwɔ hɔ

.col-md-3 na ɛwɔ hɔ

Adum abien

Nya nkyerɛwde abien a efi ase wɔ desktop so na ɛkɔ desktop akɛse so .

.kol-md-8 na ɛwɔ hɔ

.kol-md-4 na ɛwɔ hɔ

Ne tɛtrɛtɛ nyinaa, adum biako

Grid adesua biara nni hɔ a ɛho hia ma element ahorow a ɛtrɛw nyinaa.

Nkorabata abien a ɛwɔ nkorabata abien a wɔde ahyɛ mu

Sɛnea nkrataa no kyerɛ no, nesting yɛ mmerɛw —fa nkyerɛwde ahorow a ɛtoatoa so bi hyɛ kɔla bi a ɛwɔ hɔ dedaw mu kɛkɛ. Wei ma wo kɔla mmienu a ɛfiri aseɛ wɔ desktop so na ɛkɔ soro kɔ desktop akɛseɛ so , a mmienu foforɔ (a ne tɛtrɛtɛ yɛ pɛ) wɔ kɔla kɛseɛ no mu.

Wɔ mobile device akɛse, tablets ne ase no, saa columns yi ne wɔn nested columns no bɛboaboa ano.

.kol-md-8 na ɛwɔ hɔ

.kol-md-6 na ɛwɔ hɔ

.kol-md-4 na ɛwɔ hɔ

Afrafra: mobile ne desktop

Bootstrap v4 grid nhyehyɛe no wɔ adesua ahorow anum: xs (ketewa kɛse, wɔmfa adesuakuw infix yi nni dwuma), sm (ketewa), md (mfinimfini), lg (kɛse), ne xl (kɛse kɛse). Ɛkame ayɛ sɛ wubetumi de adesua ahorow yi a wɔaka abom biara adi dwuma de ayɛ nhyehyɛe ahorow a ɛyɛ nnam na ɛyɛ mmerɛw kɛse.

Tier biara a ɛwɔ classes no mu no yɛ scales up, a ɛkyerɛ sɛ sɛ woayɛ nhyehyɛe sɛ wobɛhyehyɛ widths koro no ara ama md, lg ne xl a, nea ehia sɛ wokyerɛ md nkutoo.

.kol-md-8 na ɛwɔ hɔ

.kol-6 .kol-md-4 na ɛwɔ hɔ

.kol-6 na ɛwɔ hɔ

Nea wɔadi afra: mobile, tablet, ne desktop

.kol-sm-6 .kol-lg-8 na ɛwɔ hɔ

.kol-6 .kol-lg-4 na ɛwɔ hɔ

.kol-6 .kol-sm-4 na ɛwɔ hɔ

Nsu a ɛkɔ nsu mu

Wɔ .gx-*adesua ahorow mu no, wobetumi asiesie nsu a ɛkɔ soro no.

.cola ɛwɔ nsu a .gx-4ɛkɔ nsu mu

Fa .gy-*adesua ahorow no di dwuma fa hyɛ nsu a ɛkɔ fam no so.

.cola ɛwɔ nsu a .gy-4ɛkɔ nsu mu

Wɔ .g-*adesua ahorow mu no, wobetumi asiesie gutters a ɛwɔ afã abien no nyinaa no.

.cola ɛwɔ nsu a .g-3ɛkɔ nsu mu

Nneɛma a wɔde gu mu

Klas foforɔ a wɔde aka ho wɔ Bootstrap v4.4 mu no ma kwan ma containers a ɛyɛ 100% trɛw kɔsi breakpoint pɔtee bi. v5 de xxlbreakpoint foforo ka ho.

.ade a wɔde gu mu

.ade a wɔde gu mu-sm

.ade a wɔde gu mu-md

.ade a wɔde gu mu-lg

.ade a wɔde gu mu-xl

.ade a wɔde gu mu-xxl

.ahina-nsuo