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.

Wɔ kratafa yi so

Ti a ɛwɔ soro! Hwɛ hu sɛ wubedi kan akenkan Grid krataafa no ansa na woakɔ sɛnea wobɛsesa na woayɛ wo grid columns no sɛnea wopɛ no mu.

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ɔ

Adum abiɛsa no mu biako

<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>

Adum abiɛsa no mu biako

<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

Adum abien no mu biako

<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.

.kol-9 na ɛwɔ hɔ

.col-4
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.

.col-6 Ntrɛwmu a
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 &gt; 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 .rows pii na ɛyɛ eyi, nanso ɛnyɛ ɔkwan biara a wɔfa so de di dwuma na ebetumi abu eyi ho akontaa.

.kol-6 .kol-sm-3

<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 .

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

<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ɛ orderby breakpoint (sɛ nhwɛso no, .order-1.order-md-2). Nea ɛka ho ne mmoa ma 1through 5wɔ grid tiers asia no nyinaa so.

Nea edi kan wɔ DOM mu no, wɔamfa ahyɛde biara anni dwuma

Nea ɛto so abien wɔ DOM mu, a ɛwɔ nhyehyɛe kɛse

Nea ɛto so abiɛsa wɔ DOM mu, a wɔahyehyɛ no 1

<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-firstne .order-lastclasses a ɛsesa orderof an element denam order: -1ne 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.

Nea edi kan wɔ DOM mu, wɔkraa nea etwa to

Nea ɛto so abien wɔ DOM mu, wɔanhyɛ da

Nea ɛto so abiɛsa wɔ DOM mu, wɔkraa nea edi kan

<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-4adum anan so.

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

.col-md-4 .asɛmfua-md-4

.col-md-3 .asɛmfua-md-3

.col-md-6 .asɛmfua-md-3

<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 .

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

.col-sm-5 .offset-sm-2 .col-md-6 .afiri a wɔde hyɛ mu-md-0

.kol-sm-6 .kol-md-5 .kol-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .kol-lg-6 .ɔfset-lg-0. Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so bio

<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-autosɛ wobɛhyɛ anuanom columns afiri wɔn ho wɔn ho ho adi dwuma.

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

.col-md-4 .ms-ɔkwan a wɔfa so yɛ ade

.col-md-3 .ms-md-ɔde ne nsa kyerɛɛ ne so

.col-auto .me-afiri

.col-afiri a wɔde yɛ adwuma

<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 .rowde 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.

.col-3: ne tɛtrɛtɛ yɛ 25% .

.col-sm-9: ne tɛtrɛtɛ yɛ 75% a ɛboro sm breakpoint so

<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ɔ .clearfixwrapper 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>