Grid nhyehyɛe
Fa yɛn mobile-first flexbox grid a ahoɔden wom no si nhyehyeɛ a ɛwɔ nsusuwii ne ne kɛseɛ nyinaa aseda a ɛwɔ adum dumienu nhyehyɛeɛ, default mmuaeɛ tiers anum, Sass variables ne mixins, ne adesua ahodoɔ du du pii a wɔadi kan akyerɛkyerɛ mu.
Sɛnea ɛyɛ adwuma
Bootstrap grid nhyehyɛe no de containers, rows, ne columns ahorow a ɛtoatoa so di dwuma de hyehyɛ nneɛma no na ɛne no hyia. Wɔde flexbox na esii na ɛyɛ nea ɛyɛ adwuma yiye. Ase hɔ no yɛ nhwɛso ne hwɛ a emu dɔ a ɛfa sɛnea grid no bom ho.
Woyɛ foforo wɔ flexbox mu anaasɛ wunnim? Kenkan CSS Tricks flexbox akwankyerɛ yi ma akyi, nsɛmfua, akwankyerɛ, ne koodu nsɛm nketenkete.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Nhwɛsoɔ a ɛwɔ atifi hɔ no yɛ nkorabata mmiɛnsa a ne tɛtrɛtɛ yɛ pɛ wɔ mfiri nketewa, mfimfini, akɛseɛ, ne akɛseɛ a ɛboro soɔ so de yɛn grid adesua ahodoɔ a yɛadi kan akyerɛkyerɛ mu no di dwuma. Saa nkyerɛwde ahorow no wɔ kratafa no mfinimfini a ɔwofo no ka ho .container
.
Sɛ yɛbubu no a, sɛnea ɛyɛ adwuma ni:
- Containers ma ɔkwan a wobɛfa so ahyɛ wo site no mu nsɛm no mfinimfini na woayɛ no tẽẽ. Fa di dwuma
.container
ma pixel trɛw a ɛyɛ mmuae anaasɛ.container-fluid
mawidth: 100%
wɔ viewport ne mfiri akɛse nyinaa so. - Rows yɛ ntama a wɔde kyekyere adum ho. Adum biara wɔ horizontal
padding
(a wɔfrɛ no gutter) a wɔde hwɛ baabi a ɛda wɔn ntam no so.padding
Afei wɔde nsensanee a enye siw eyi ano wɔ nkyerɛwde ahorow no so . Saa kwan yi so no, nsɛm a ɛwɔ wo nkyerɛwde ahorow no mu nyinaa yɛ nea wɔde aniwa hu a ɛne benkum so hyia. - Wɔ grid nhyehyeɛ mu no, ɛsɛ sɛ wɔde nsɛm a ɛwɔ mu no to nkorabata mu na nkorabata nko ara na ɛbɛtumi ayɛ row ahorow no mma ntɛm ara.
- Esiane flexbox nti, grid columns a enni specified
width
no bɛhyehyɛ ne ho sɛ columns a ne tɛtrɛtɛ yɛ pɛ. Sɛ nhwɛso no, nhwɛso anan a.col-sm
emu biara bɛyɛ 25% trɛw ankasa fi breakpoint ketewa no ne soro. Hwɛ auto-layout columns ɔfã no ma nhwɛso pii. - Kɔlam adesua ahorow kyerɛ kɔla dodow a wopɛ sɛ wode di dwuma wɔ 12 a ebetumi aba wɔ row biara mu no mu. Enti, sɛ wopɛ sɛ nkyerɛwde abiɛsa a ne tɛtrɛtɛ yɛ pɛ twa a, wubetumi de adi dwuma
.col-4
. - Wɔde kɔla
width
s ahyɛ ɔha mu nkyekyɛmu mu, enti ɛyɛ nsuo ne kɛseɛ berɛ biara sɛ wɔde toto wɔn awofoɔ element ho. - Columns wɔ horizontal
padding
a ɛbɛma gutters no wɔ columns ankorankoro ntam, nanso, wubetumi ayimargin
afi rows nepadding
fi columns no mu ne.no-gutters
on the.row
. - Sɛnea ɛbɛyɛ a grid no bɛtumi ayɛ adwuma no, grid no breakpoints anum na ɛwɔ hɔ, baako ma breakpoint biara a ɛyɛ mmuaeɛ : breakpoints no nyinaa (ketewa a ɛboro soɔ), nketewa, mfimfini, kɛseɛ, ne kɛseɛ a ɛboro soɔ.
- Grid breakpoints gyina minimum width media queries so, a ɛkyerɛ sɛ ɛfa saa breakpoint biako ne wɔn a ɛwɔ n’atifi nyinaa ho (sɛ nhwɛso no,
.col-sm-4
ɛfa mfiri nketewa, mfinimfini, akɛse, ne akɛse a ɛboro so ho, nanso ɛnyɛxs
breakpoint a edi kan no). - Wubetumi de grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu (te sɛ
.col-4
) anaa Sass mixins adi dwuma ama nkyerɛase agyiraehyɛde pii.
Hu anohyeto ne mfomso a ɛwɔ flexbox ho , te sɛ HTML nneɛma bi a wuntumi mfa nni dwuma sɛ flex containers .
Grid a wobetumi apaw
Bere a Bootstrap de em
s anaa rem
s di dwuma de kyerɛkyerɛ akɛse dodow no ara mu no, px
wɔde s di dwuma ma grid breakpoints ne container widths. Eyi te saa efisɛ viewport no trɛw yɛ pixels na ɛnsakra ne font kɛse no .
Hwɛ sɛnea Bootstrap grid nhyehyɛe no afã horow yɛ adwuma wɔ mfiri ahorow pii a ɛwɔ pon a ɛyɛ mmerɛw so.
Nneɛma nketenkete a ɛboro so <576px |
Nketewa a ɛyɛ ≥576px |
Mfinimfini ≥768px |
Ɔkɛseɛ ≥992px |
Ɔkɛseɛ a ɛboro so ≥1200px |
|
---|---|---|---|---|---|
Max ahina no trɛw | Obiara nni hɔ (auto) . | 540px na ɛyɛ | 720px na ɛyɛ | 960px na ɛyɛ | 1140px na ɛyɛ |
Adesuakuw no anim asɛm | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# a ɛwɔ nkyerɛwde ahorow mu | 12. 12 | ||||
Gutter no trɛw | 30px (15px wɔ ɔfa biara a ɛwɔ kɔla bi so) . | ||||
Nea ɛyɛ nestable | Aane | ||||
Kɔla a wɔkra no | Aane |
Auto-layout nkyerɛwde ahorow
Fa breakpoint-specific column classes di dwuma ma column sizing a ɛnyɛ den a enni class a wɔde nɔma a ɛda adi pefee te sɛ .col-sm-6
.
Ntrɛwmu a ɛyɛ pɛ
Sɛ nhwɛso no, grid nhyehyɛe abien a ɛfa mfiri ne viewport biara ho ni, efi xs
kosi xl
. Fa unit-less class dodow biara ka ho ma breakpoint biara a wuhia na column biara bɛyɛ ne tɛtrɛtɛ koro.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Multi-line a ne tɛtrɛtɛ yɛ pɛ
Yɛ nkyerɛwde a ne tɛtrɛtɛ yɛ pɛ a ɛtrɛw nkyerɛwde ahorow pii mu denam .w-100
baabi a wopɛ sɛ nkyerɛwde no bubu kɔ nkyerɛwde foforo a wode bɛhyɛ mu no so. Ma ahomegye no nyɛ nea ɛyɛ adwuma denam nneɛma .w-100
bi a wɔde kyerɛ nneɛma a ɛyɛ adwuma a wode bɛfrafra so .
Na Safari flexbox bɔne bi wɔ hɔ a ɛmma eyi ntumi nyɛ adwuma a enni pefee flex-basis
anaa border
. Workarounds wɔ hɔ ma browser version dedaw, nanso ɛnsɛ sɛ ɛho hia sɛ wo target browsers no nhwe ase wɔ buggy versions no mu a.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Setting column biako trɛw
Auto-layout for flexbox grid columns nso kyerɛ sɛ wobɛtumi ahyɛ column baako trɛw na woama anuanom columns no ayɛ ne kɛseɛ asesa ne kɛseɛ atwa ho ahyia. Wubetumi de grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu (sɛnea wɔakyerɛ wɔ ase hɔ no), grid mixins, anaa inline ntrɛwmu adi dwuma. Hyɛ no nsow sɛ nkyerɛwde afoforo no bɛsesa ne kɛse ɛmfa ho sɛnea mfinimfini adum no trɛw te.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Nsɛm a ɛwɔ ntrɛwmu a ɛsakrasakra
Fa col-{breakpoint}-auto
adesua ahorow di dwuma de ma nkyerɛwde ahorow no kɛse gyina wɔn mu nsɛm no abɔde mu trɛw so.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Adesua ahorow a wɔde mmuae ma
Bootstrap no grid no ka tiers anum a wɔadi kan akyerɛkyerɛ mu adesua ahorow a wɔde besisi mmuae nhyehyɛe ahorow a ɛyɛ den. Yɛ wo columns no kɛse wɔ mfiri nketewa, nketewa, mfinimfini, akɛse, anaa akɛse a ɛboro so so sɛnea wuhu sɛ ɛfata.
Nneɛma a wɔde paapae mu nyinaa
Sɛ wopɛ grids a ɛyɛ pɛ fi mfiri nketewa so kosi kɛse so a, fa .col
ne .col-*
adesua ahorow no di dwuma. Kyerɛ adesuakuw a wɔde nɔma ahyɛ mu bere a wuhia kɔla a ne kɛse titiriw; anyɛ saa a, ntwentwɛn wo nan ase sɛ wobɛbata .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Wɔaboaboa ano akɔ soro
Sɛ wode .col-sm-*
adesua ahorow biako di dwuma a, wubetumi ayɛ grid nhyehyɛe titiriw a efi ase a wɔaboaboa ano na ɛbɛyɛ horizontal wɔ breakpoint ketewa ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Fa fra na fa fra mu
Wompɛ sɛ wo columns no bɛ stack kɛkɛ wɔ grid tiers binom mu? Fa adesua ahorow a wɔaka abom di dwuma ma tier biara sɛnea ɛho hia. Hwɛ nhwɛso a ɛwɔ ase ha no na woanya sɛnea ne nyinaa yɛ adwuma no ho adwene pa.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Nsu a ɛkɔ nsu mu
Gutters betumi mmuae asiesie denam breakpoint-specific padding ne negative margin utility adesuakuw ahorow so. Sɛ wopɛ sɛ wosakra gutters no wɔ row bi a wɔde ama mu a, pair a negative margin utility wɔ .row
ne matching padding utilities wɔ .col
s no so. Ebia ɛho behia sɛ wɔyɛ nsakrae wɔ .container
anaa ɔwofo no nso mu na wɔakwati sɛ ɛbɛboro so a wɔmpɛ, de adi dwuma bio matching padding utility..container-fluid
Nhwɛsoɔ a ɛfa sɛdeɛ wobɛsesa Bootstrap grid no wɔ ( lg
) breakpoint kɛseɛ no ne nea ɛboro saa no nie. Yɛama .col
padding no akɔ soro ne .px-lg-5
, counteracted that with .mx-lg-n5
on the parent .row
na afei yɛasiesie .container
wrapper no ne .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Fa nkyerɛwde ahorow no toatoa so
Fa .row-cols-*
adesua ahorow a ɛyɛ mmuae no di dwuma fa hyehyɛ nkyerɛwde dodow a ɛkyerɛ wo nsɛm ne wo nhyehyɛe no yiye no ntɛm. Bere a .col-*
adesua ahorow a ɛyɛ daa no fa nkyerɛwde ahorow no ankorankoro ho (sɛ nhwɛso no, .col-md-4
), wɔde nkyerɛwde ahorow no adesua ahorow no si ɔwofo no so .row
sɛ ɔkwan tiawa.
Fa saa row columns classes yi yɛ ntɛm yɛ basic grid layouts anaasɛ hwɛ wo card layouts so.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Wubetumi nso de Sass mixin a ɛka ho no adi dwuma, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Nneɛma a Wɔde Di Dwuma
Fa flexbox alignment utilities di dwuma de hyɛ column ahorow no hyia wɔ vertical ne horizontally. Internet Explorer 10-11 ntumi mmoa flex nneɛma a wɔde gyina hɔ gyina hɔ bere a flex container no wɔ min-height
sɛnea wɔakyerɛ wɔ ase ha no. Hwɛ Flexbugs #3 ma nsɛm pii.
Nhyiam a ɛda hɔ gyina hɔ
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Horizontal a wɔde hyɛ mu
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Gutters biara nni hɔ
Wobetumi de .no-gutters
. Eyi yi margin
s a enye no fi .row
ne nea ɛwɔ soro no padding
fi mmofra adum a ɛwɔ hɔ ntɛm nyinaa nyinaa mu.
Ɛha na source code a wɔde yɛ saa styles yi ni. Hyɛ no nsow sɛ wɔde column overrides no scoped kɔ mmofra columns a edi kan no nkutoo so na wɔde wɔn ani asi so denam attribute selector so . Bere a eyi ma wonya selector pɔtee bi no, wobetumi akɔ so ayɛ column padding no foforo denam spacing utilities so .
Wohia adwini a efi ano kosi ano? Tow ɔwofo no gu .container
anaa .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Wɔ nneyɛe mu no, sɛnea ɛte ni. Hyɛ no nsow sɛ wubetumi akɔ so de eyi adi dwuma wɔ grid adesua afoforo a wɔadi kan akyerɛkyerɛ mu nyinaa (a column trɛw, mmuae tiers, reorders, ne nea ɛkeka ho ka ho).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Kɔla a wɔde kyekyere nneɛma ho
Sɛ wɔde nkyerɛwde bɛboro 12 gu ɔfa biako mu a, nkorabata foforo kuw biara, sɛ ade biako, bɛbɔ nkyerɛwde foforo so.
Esiane sɛ 9 + 4 = 13 > 12 nti, saa div a ne kɛse yɛ adum 4 yi nya kyekyere nkyerɛwde foforo so sɛ ade biako a ɛtoatoa so.
edi hɔ no kɔ so fa nkyerɛwde foforo no so.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Kɔla a ɛpaapae
Sɛ wobɛbubu columns akɔ line foforɔ mu wɔ flexbox mu a, ɛhia hack ketewa bi: fa element bi ka ho ne width: 100%
baabiara a wopɛ sɛ wokyekyere wo columns no kɔ line foforɔ mu. Mpɛn pii no, wɔde .row
s pii na ɛyɛ eyi, nanso ɛnyɛ ɔkwan biara a wɔfa so de di dwuma na ebetumi abu eyi ho akontaa.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Wubetumi nso de saa ahomegye yi adi dwuma wɔ ahomegyebea pɔtee bi mu denam yɛn responsive display utilities no so .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Nneɛma a Wɔsan Hyehyɛ no
Hyɛ adesua ahorow ho nhyehyɛe
Fa .order-
adesua ahorow di dwuma de hwɛ sɛnea wo nsɛm no nnidiso nnidiso wɔ aniwa so no so. Saa adesua ahorow yi yɛ mmuae, enti wubetumi ahyɛ order
by breakpoint (sɛ nhwɛso no, .order-1.order-md-2
). Nea ɛka ho ne mmoa ma 1
through 12
wɔ grid tiers anum no nyinaa so.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Afei nso responsive .order-first
ne .order-last
classes a ɛsesa order
of an element denam order: -1
ne order: 13
( order: $columns + 1
) a wɔde di dwuma no so. Saa adesua ahorow yi nso wobetumi de afrafra .order-*
adesua ahorow a wɔde nɔma ahyɛ mu no mu sɛnea ɛho hia.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Offsetting nkyerɛwde ahorow
Wubetumi offset grid columns wɔ akwan abien so: yɛn responsive .offset-
grid classes ne yɛn margin utilities . Wɔayɛ grid adesua ahorow no kɛse sɛnea ɛbɛyɛ a ɛne column ahorow hyia bere a margins ho wɔ mfaso kɛse ma nhyehyɛe ahorow a ɛyɛ ntɛm wɔ baabi a offset no trɛw yɛ nsakrae.
Offset adesua ahorow
Fa nkyerɛwde ahorow no kɔ nifa denam .offset-md-*
adesua ahorow so. Saa adesua ahorow yi ma kɔla bi benkum so no kɔ soro denam *
nkyerɛwde ahorow so. Sɛ nhwɛso no, .offset-md-4
ɛkɔfa .col-md-4
adum anan so.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Wɔ column clearing wɔ responsive breakpoints akyi no, ebia ɛho behia sɛ wo reset offsets. Hwɛ eyi wɔ adeyɛ mu wɔ grid nhwɛso no mu .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Margin nneɛma a wɔde di dwuma
Ɛnam sɛ wobɛtu akɔ flexbox wɔ v4 mu a, wobɛtumi de margin utilities te sɛ .mr-auto
sɛ wobɛhyɛ anuanom columns afiri wɔn ho wɔn ho ho adi dwuma.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Nesting a wɔde yɛ buw
Sɛ wopɛ sɛ wode default grid no hyɛ wo nsɛm no mu a, fa kɔla foforo .row
ne .col-sm-*
nkyerɛwde ahorow ka ho wɔ .col-sm-*
kɔla bi a ɛwɔ hɔ dedaw no mu. Ɛsɛ sɛ nested rows no de columns ahorow a ɛka bom yɛ 12 anaa nea ennu saa ka ho (ɛnhia sɛ wode columns 12 a ɛwɔ hɔ no nyinaa bedi dwuma).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass mixins a wɔde yɛ nneɛma
Sɛ wode Bootstrap no source Sass fael ahorow redi dwuma a, wowɔ hokwan sɛ wode Sass variables ne mixins bedi dwuma de ayɛ custom, semantic, ne responsive page layouts. Yɛn grid adesua ahorow a wɔakyerɛkyerɛ mu dedaw no de saa nsakrae ne mixins koro yi ara di dwuma de ma adesua ahorow a wɔasiesie sɛ wɔde bedi dwuma no nyinaa ma nhyehyɛe ahorow a ɛyɛ mmuae ntɛmntɛm.
Nneɛma a Ɛsakra
Variables ne maps kyerɛ column dodow, gutter trɛw, ne media asɛmmisa beae a wobefi ase floating columns. Yɛde eyinom di dwuma de yɛ grid adesua ahorow a wɔahyɛ ato hɔ a wɔakyerɛw ho asɛm wɔ atifi hɔ no, ne afei nso mixins a wɔahyɛ da ayɛ a wɔakyerɛw wɔ ase ha no.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Nneɛma a wɔde frafra
Wɔde mixins di dwuma de ka grid variables no ho de yɛ semantic CSS ma grid columns ankorankoro.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Nhwɛso a wɔde di dwuma
Wubetumi asesa variables no akɔ w’ankasa custom values no mu, anaasɛ wode mixins no adi dwuma kɛkɛ ne wɔn default values no. Nhwɛsoɔ a ɛfa default nhyehyeɛ no a wode bɛyɛ nhyehyɛɛ a ɛwɔ kɔla mmienu a ɛwɔ nsonsonoeɛ wɔ ntam no nie.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Grid no a wɔreyɛ no sɛnea wopɛ
Sɛ yɛde yɛn grid Sass variables ne maps a wɔasisi no di dwuma a, ɛyɛ yie sɛ wobɛsesa grid classes a wɔadi kan akyerɛkyerɛ mu no koraa. Sesa tiers dodow, media abisade nsusuwii, ne container no trɛw—afei san boaboa ano.
Adum ne nsu a ɛkɔ nsu mu
Wobetumi asesa grid columns dodow no denam Sass variables so. $grid-columns
wɔde di dwuma de yɛ ntrɛwmu (wɔ ɔha biara mu) a ɛwɔ adum ankorankoro biara mu bere a $grid-gutter-width
ɛde ntrɛwmu ma adum no nsu a ɛkɔ nsu mu no.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Grid a ɛwɔ sorosoro
Sɛ wokɔ akyiri sen columns no ankasa a, wubetumi nso ayɛ grid tiers dodow no ho nhyehyɛe. Sɛ wopɛ grid tiers anan pɛ a, anka wobɛma $grid-breakpoints
ne no ayɛ foforo $container-max-widths
akɔ biribi te sɛ eyi mu:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sɛ woreyɛ nsakraeɛ biara wɔ Sass variables anaa maps no mu a, ɛho bɛhia sɛ wode wo nsakraeɛ no sie na wosan boaboa ano. Saa a wobɛyɛ no bɛma woanya grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu ama column widths, offsets, ne ordering foforo koraa. Wɔbɛsan ayɛ mmuaeɛ visibility utilities no foforɔ de adi dwuma wɔ custom breakpoints no mu. Hwɛ sɛ wode grid values bɛhyɛ px
(ɛnyɛ rem
, em
, anaa %
).