Dagiti Kolumna

Ammuem no kasano ti mangbalbaliw kadagiti adigi babaen ti sumagmamano a pagpilian para iti panagtunos, panagurnos, ken panag-offset gapu iti sistemami a flexbox grid. Plus, kitaen no kasano ti agusar kadagiti klase ti adigi tapno mangituray kadagiti kalawa dagiti saan a grid nga elemento.

Iti daytoy a panid

Ulo nga agpangato! Siguraduen a basaen nga umuna ti panid ti Grid sakbay nga ag-dive no kasano a baliwan ken maibagay dagiti kolum ti grid-mo.

No kasano ti panagtrabahoda

Dagiti adigi ket mangbangon iti arkitektura ti flexbox ti grid. Ti Flexbox ket kayatna a sawen nga addaantayo kadagiti pagpilian para iti panagbalbaliw kadagiti indibidual a kolum ken panangbalbaliw kadagiti grupo dagiti kolum iti lebel ti hilera . Piliem no kasano a dumakkel, bumassit, wenno iti sabali a pamay-an agbaliw dagiti adigi.
No mangbangon kadagiti layout ti grid, amin a linaon ket mapan kadagiti adigi. Ti hirarkia ti grid ti Bootstrap ket mapan manipud iti pagkargaan aginggana iti hilera aginggana iti kolum aginggana iti linaonmo. Iti manmano nga okasion, mabalinmo a pagtiponen ti linaon ken kolum, ngem ammom a mabalin nga adda dagiti di nairanta a pagbanagan.
Ti Bootstrap ket mangiraman kadagiti nasakbay a naikeddeng a klase para iti panagpartuat kadagiti napardas, makasungbat a layout. Iti innem a breakpoint ken maysa a dosena a kolum iti tunggal maysa a grid tier, addaankami kadagiti pinulpullo a klase a naibangon para kenka tapno mangpartuat kadagiti kayatmo a layout. Mabalin a baldado daytoy babaen ti Sass no kayatmo.

Panagtunos

Usaren dagiti flexbox alignment utilities tapno bertikal ken horizontal a mangitunos kadagiti adigi.

Bertikal a panagtunos

Maysa kadagiti tallo a kolum

html nga

<div class="container text-center">
  <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>

Maysa kadagiti tallo a kolum

html nga

<div class="container text-center">
  <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>

Paisaad a panagtunos

Maysa kadagiti dua a kolum

html nga

<div class="container text-center">
  <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>

Panagbalkot iti adigi

No nasurok a 12 nga adigi ti naikabil iti uneg ti maymaysa a linia, tunggal grupo dagiti ekstra nga adigi ket, kas maysa a yunit, agbalkot iti baro a linia.

.kol-9 nga

.col-4
Gapu ta 9 + 4 = 13 > 12, daytoy nga 4-kolum-a-kalawa a div ket makagun-od ti nabalkot iti baro a linia a kas maysa nga agsasaruno a yunit.

.col-6
Agtultuloy dagiti sumaganad a kolum iti baro a linia.

html nga

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

Agburak ti adigi

Ti panangburak kadagiti adigi iti baro a linia iti flexbox ket agkasapulan ti bassit a hack: manginayon ti maysa nga elemento nga addaan width: 100%sadinoman a kayatmo a baluten dagiti adigim iti baro a linia. Gagangay daytoy ket maibanag babaen ti adu nga .rows, ngem saan a tunggal maysa a pamay-an ti pannakaipatungpal ket mabalin a mangibaga iti daytoy.

.kol-6 .kol-sm-3

html nga

<div class="container text-center">
  <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>

Mabalinmo pay nga iyaplikar daytoy a break kadagiti espesipiko a breakpoint babaen dagiti responsive display utilities mi .

.kol-6 .kol-sm-4

html nga

<div class="container text-center">
  <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>

Panagurnos manen

Ag-order kadagiti klase

Usaren .order-dagiti klase para iti panangkontrol iti makita nga urnos ti linaonmo. Dagitoy a klase ket makasungbat, isu a mabalinmo nga ikeddeng ti orderbabaen ti breakpoint (kas pagarigan, .order-1.order-md-2). Iramanna ti suporta para iti 1babaen 5iti ballasiw ti amin nga innem a grid tiers.

Umuna iti DOM, awan ti naipakat nga order

Maikadua iti DOM, addaan iti dakdakkel nga order

Maikatlo iti DOM, nga addaan iti order a 1

html nga

<div class="container text-center">
  <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>

Adda pay dagiti responsive .order-firstken .order-lastdagiti klase a mangbalbaliw ti orderti maysa nga elemento babaen ti panangipakat order: -1ken order: 6, a nagsasaruno. Mabalin met a mailaok dagitoy a klase kadagiti nanumeroan .order-*a klase no kasapulan.

Umuna iti DOM, naorder a maudi

Maikadua iti DOM, unordered

Maikatlo iti DOM, naorder nga umuna

html nga

<div class="container text-center">
  <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>

Panang-offset kadagiti kolum

Mabalinmo nga i-offset dagiti kolum ti grid iti dua a wagas: dagiti sumungbat .offset-a klasemi ti grid ken dagiti utilidad ti marginmi . Dagiti klase ti grid ket nadakkel tapno maipada kadagiti adigi bayat a dagiti pingir ket ad-adda a makatulong para kadagiti napardas a layout a sadiay ti kalawa ti offset ket agdumaduma.

Dagiti klase ti offset

Iyakar dagiti kolum iti kannawan babaen ti panagusar kadagiti .offset-md-*klase. Dagitoy a klase ket paaduenda ti kannigid a pingir ti maysa a kolum babaen dagiti *adigi. Kas pagarigan, .offset-md-4aggaraw .col-md-4iti rabaw ti uppat a kolum.

.kol-md-4 nga

.kol-md-4 .offset-md-4

.kol-md-3 .ti-offset-md-3

.kol-md-6 .offset-md-3

html nga

<div class="container text-center">
  <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>

Malaksid ti panagikkat ti kolum kadagiti sumungbat a breakpoint, mabalin a kasapulam nga i-reset dagiti offset. Kitaen daytoy nga agtigtignay iti pagarigan ti grid .

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

.kol-sm-5 .offset-sm-2 .kol-md-6 .offset-md-0

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

.kol-sm-6 .kol-md-5 .offset-md-2 .kol-lg-6 .offset-lg-0

html nga

<div class="container text-center">
  <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>

Dagiti utilidad ti margin

Iti panagakar iti flexbox iti v4, mabalinmo nga usaren dagiti margin utilities a kas .me-autoti panangpilit kadagiti kakabsat a kolum nga umadayo iti maysa ken maysa.

.kol-md-4 nga

.kol-md-4 nga .ms-auto

.kol-md-3 .ms-md-auto nga

.kol-auto .nak-auto

.kol-auto nga

html nga

<div class="container text-center">
  <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>

Agmaymaysa a klase ti kolum

Dagiti .col-*klase ket mabalin pay a mausar iti ruar ti a .rowtapno mangted ti maysa nga elemento ti espesipiko a kalawa. Tunggal dagiti klase ti adigi ket maus-usar a kas dagiti saan a direkta nga annak ti maysa a hilera, dagiti padding ket mailaksid.

.col-3: lapad nga 25% .

.col-sm-9: kalawa ti 75% iti ngato ti sm breakpoint

html nga

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

Dagiti klase ket mabalin a mausar a maikuyog kadagiti utilidad tapno mangpartuat kadagiti makasungbat a naitayab a ladawan. Siguraduen a baluten ti linaonna iti .clearfixbalkot tapno maikkat ti float no ab-ababa ti teksto.

Maysa a parapo ti teksto ti placeholder. Us-usarenmi daytoy ditoy tapno maipakita ti panagusar ti klase ti clearfix. Manginayonkami kadagiti medyo sumagmamano nga awan kaipapanan a ragup ti sasao ditoy tapno maipakita no kasano a makilanglangen dagiti adigi ditoy iti naitayab a ladawan.

Kas makitayo dagiti parapo a siaayat a mangbalkot iti naitayab a ladawan. Ita panunotem no kasano a daytoy ket agparang koma nga addaan iti sumagmamano nga aktual a linaon ditoy, imbes a daytoy laeng a makauma a teksto ti placeholder nga agtultuloy ken agtultuloy, ngem aktual a mangipakaammo iti awan a makita nga impormasion iti. Basta mangala dayta iti espasio ken saan koma a talaga a basaen.

Ket kaskasdi, adtoyka, nga agtultuloy pay laeng a mangbasa iti daytoy a teksto ti placeholder, a mangnamnama iti sumagmamano pay a pannakaawat, wenno sumagmamano a nailemmeng nga itlog ti paskua ti linaon. Maysa nga angaw, nalabit. Daksanggasat ta awan kadagita ditoy.

html nga

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