Nsɛmma nhoma ahorow
Sua sɛnea wobɛsesa columns a nsa kakraa bi a wubetumi apaw ama alignment, ordering, ne offsetting aseda yɛn flexbox grid nhyehyɛe no. Plus, hwɛ sɛnea wode column classes bedi dwuma de ahwɛ widths a ɛnyɛ grid elements.
Sɛnea wɔyɛ adwuma
-
Nkorabata ahorow no si grid no flexbox architecture no so. Flexbox kyerɛ sɛ yɛwɔ akwan a yɛbɛfa so asesa nkyerɛwde ankorankoro na yɛasesa nkyerɛwde akuw wɔ row level no so . Wopaw sɛnea adum ahorow nyin, ɛtwetwe, anaasɛ ɛsakra wɔ ɔkwan foforo so.
-
Sɛ worekyekye grid layouts a, emu nsɛm nyinaa kɔ wɔ columns mu. Bootstrap grid no nhyehyeɛ no kɔ fi container kɔ row kɔ column kɔ wo content so. Wɔ mmere a ɛntaa nsi mu no, wubetumi de emu nsɛm ne nsɛm a wɔakyerɛw agu so aka abom, nanso hu sɛ nneɛma betumi afi mu aba a woanhyɛ da.
-
Bootstrap no ka adesua ahorow a wɔadi kan akyerɛkyerɛ mu a wɔde bɛyɛ nhyehyɛe ahorow a ɛyɛ ntɛm, a ɛyɛ mmuae. Yɛwɔ breakpoints nsia ne columns dumien wɔ grid tier biara mu no, yɛwɔ classes du du pii a wɔasisi dedaw ama wo sɛ wobɛbɔ layouts a wopɛ. Wobetumi asiw eyi ano denam Sass so sɛ wopɛ a.
Nneɛma a Wɔde Di Dwuma
Fa flexbox alignment utilities di dwuma de hyɛ column ahorow no hyia wɔ vertical ne horizontally.
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 class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</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 5
wɔ grid tiers asia no nyinaa so.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
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: 6
, 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ɛ .me-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 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Standalone column adesua ahorow
Wobetumi .col-*
nso de adesua ahorow no adi dwuma wɔ a akyi .row
de ama element bi trɛw pɔtee bi. Bere biara a wɔde column classes bedi dwuma sɛ non direct children of a row no, woyi paddings no fi mu.
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
Wobetumi de adesua ahorow no abom ne utilities ayɛ mfonini ahorow a ɛsensɛn nsu so a ɛyɛ mmuae. Hwɛ hu sɛ wobɛkyekyere emu nsɛm no wɔ .clearfix
wrapper mu na ama float no afi hɔ sɛ nsɛm no yɛ tiawa a.
Nkyekyɛm bi a ɛfa beae a wɔde nsɛm gu mu ho. Yɛde redi dwuma wɔ ha de akyerɛ sɛnea wɔde clearfix adesua no di dwuma. Yɛde nsɛmfua kakraa bi a ntease nnim rebɛka ho wɔ ha de akyerɛ sɛnea nkyerɛwde ahorow no ne mfonini a ɛsensɛn nsu so no di nkitaho wɔ ha.
Sɛnea wubetumi ahu no, nkyekyem ahorow no de fɛfɛɛfɛ kyekyere mfonini a ɛsensɛn nsu so no ho. Afei susuw sɛnea eyi bɛyɛ ne nsɛm ankasa bi wɔ ha, sen sɛ ɛbɛyɛ saa beae a wɔde nsɛm a ɛyɛ mfonoe yi ara kwa a ɛkɔ so na ɛkɔ so, nanso nokwarem no ɛmma nsɛm biara a wotumi hu wɔ. Ɛgye baabi ara kwa na ɛnsɛ sɛ wɔkenkan ankasa.
Na nanso, wo ni, woda so ara rebɔ wo ho ban wɔ saa beaeɛ nkyerɛwee yi akenkan mu, a wowɔ anidasoɔ sɛ wobɛnya nhumu foforɔ bi, anaasɛ easter egg bi a ahintaw a ɛwɔ mu. Aseresɛm bi, ebia. Awerɛhosɛm ne sɛ, ɛno mu biara nni ha.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>