Mga kolum

Pagkat-on unsaon pag-usab ang mga kolum nga adunay pipila ka mga kapilian alang sa pag-align, pag-order, ug pag-offset salamat sa among flexbox grid system. Dugang pa, tan-awa kung giunsa paggamit ang mga klase sa kolum aron madumala ang mga gilapdon sa mga elemento nga dili grid.

Niini nga panid

Taas ang ulo! Siguruha nga basahon una ang panid sa Grid sa dili pa mag-dive kung giunsa pag-usab ug pag-customize ang imong mga kolum sa grid.

Giunsa nila pagtrabaho

Ang mga kolum nagtukod sa arkitektura sa flexbox sa grid. Ang Flexbox nagpasabot nga kita adunay mga kapilian sa pag-ilis sa indibidwal nga mga kolum ug pag-usab sa mga grupo sa mga kolum sa lebel sa laray . Gipili nimo kung giunsa pagtubo, pagkunhod, o pagbag-o ang mga kolum.
Kung magtukod mga layout sa grid, ang tanan nga sulud moadto sa mga kolum. Ang hierarchy sa grid ni Bootstrap gikan sa sudlanan ngadto sa laray ngadto sa kolum ngadto sa imong sulod. Sa talagsa nga mga okasyon, mahimo nimong isagol ang sulud ug kolum, apan hinumdomi nga mahimo’g adunay wala damha nga mga sangputanan.
Ang Bootstrap naglakip sa mga predefined nga mga klase alang sa paghimo og paspas, responsive nga mga layout. Uban sa unom ka mga breakpoint ug usa ka dosena nga mga kolum sa matag grid tier, kami adunay daghang mga klase nga natukod na alang kanimo sa paghimo sa imong gusto nga mga layout. Mahimo kini nga ma-disable pinaagi sa Sass kung gusto nimo.

Pag-align

Gamita ang flexbox alignment utilities sa vertical ug horizontally align nga mga column.

Bertikal nga paglinya

Usa sa tulo ka kolum

html

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

Usa sa tulo ka kolum

html

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

Horizontal nga pag-align

Usa sa duha ka kolum

html

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

Pagputos sa kolum

Kung labaw pa sa 12 ka mga kolum ang ibutang sa sulod sa usa ka laray, ang matag grupo sa dugang nga mga kolum, isip usa ka yunit, ibutang sa usa ka bag-ong linya.

.col-9

.col-4
Sukad sa 9 + 4 = 13 > 12, kining 4-kolum nga gilapdon nga div maputos sa bag-ong linya isip usa ka magkadugtong nga yunit.

.col-6
Ang sunod nga mga kolum nagpadayon sa bag-ong linya.

html

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

Mga guba sa kolum

Ang pagbuak sa mga kolum ngadto sa usa ka bag-ong linya sa flexbox nanginahanglan usa ka gamay nga hack: pagdugang usa ka elemento width: 100%kung diin nimo gusto nga ibalot ang imong mga kolum sa usa ka bag-ong linya. Kasagaran kini mahimo nga adunay daghang .rowmga s, apan dili tanan nga pamaagi sa pagpatuman makatubag niini.

.col-6 .col-sm-3

html

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

Mahimo usab nimo nga i-apply kini nga break sa piho nga mga breakpoint gamit ang among responsive display utilities .

.col-6 .col-sm-4

html

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

Pag-order pag-usab

Pag-order sa mga klase

Gamita .order-ang mga klase alang sa pagkontrolar sa biswal nga han-ay sa imong sulod. Kini nga mga klase responsive, aron mahimo nimong itakda ang orderby breakpoint (pananglitan, .order-1.order-md-2). Naglakip sa suporta alang 1sa 5tanan nga unom nga mga lebel sa grid.

Una sa DOM, walay order nga gipadapat

Ikaduha sa DOM, nga adunay mas dako nga han-ay

Ikatulo sa DOM, nga adunay order nga 1

html

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

Adunay usab mga responsive .order-firstug .order-lastmga klase nga nagbag-o ordersa usa ka elemento pinaagi sa pag-apply order: -1ug order: 6, matag usa. Kini nga mga klase mahimo usab nga isagol sa gi-numero nga .order-*mga klase kung gikinahanglan.

Una sa DOM, ulahi nga gi-order

Ikaduha sa DOM, wala ma-order

Ikatulo sa DOM, gi-order una

html

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

Pag-offset sa mga kolum

Mahimo nimong i-offset ang mga column sa grid sa duha ka paagi: ang among responsive .offset-grid classes ug among margin utilities . Ang mga klase sa grid gisukod aron mohaum sa mga kolum samtang ang mga margin mas mapuslanon alang sa dali nga mga layout diin ang gilapdon sa offset variable.

Offset nga mga klase

Ibalhin ang mga kolum sa tuo gamit ang .offset-md-*mga klase. Kini nga mga klase nagdugang sa wala nga margin sa usa ka kolum pinaagi sa *mga kolum. Pananglitan, .offset-md-4naglihok .col-md-4sa upat ka mga kolum.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

html

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

Agi og dugang sa paghawan sa kolum sa mga responsive nga breakpoints, kinahanglan nimo nga i-reset ang mga offset. Tan-awa kini sa aksyon sa pananglitan sa grid .

.col-sm-5 .col-md-6

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

.col-sm-6 .col-md-5 .col-lg-6

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

html

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

Mga gamit sa margin

Sa paglihok sa flexbox sa v4, mahimo nimong gamiton ang mga margin utilities sama .me-autosa pagpugos sa mga kolum sa igsoon nga layo sa usag usa.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-awto

html

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

Standalone nga mga klase sa kolum

Ang .col-*mga klase mahimo usab nga gamiton sa gawas .rowsa paghatag sa usa ka elemento sa usa ka piho nga gilapdon. Sa matag higayon nga ang mga klase sa kolum gigamit isip dili direkta nga mga bata sa usa ka laray, ang mga padding dili iapil.

.col-3: gilapdon sa 25%

.col-sm-9: gilapdon sa 75% labaw sa sm breakpoint

html

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

Ang mga klase mahimong magamit kauban ang mga utilities aron makahimo mga responsive nga naglutaw nga mga imahe. Siguruha nga iputos ang sulud sa usa ka .clearfixwrapper aron mahawan ang float kung ang teksto mas mubo.

Usa ka parapo sa teksto sa placeholder. Gigamit namo kini dinhi aron ipakita ang paggamit sa klase sa clearfix. Nagdugang kami og pipila ka walay kahulogan nga hugpong sa mga pulong dinhi aron ipakita kung giunsa ang mga kolum nga nakig-uban dinhi sa naglutaw nga imahe.

Ingon sa imong makita ang mga parapo nga matahum nga giputos sa naglutaw nga imahe. Karon hunahunaa kung unsa kini tan-awon sa pipila ka aktuwal nga sulud dinhi, imbes nga kini nga makalaay nga teksto sa placeholder nga nagpadayon ug nagpadayon, apan sa tinuud wala maghatag mahikap nga kasayuran sa. Nagkinahanglan lang kini og luna ug dili gyud angay basahon.

Ug bisan pa, ania ka, nagpadayon sa pagbasa sa kini nga teksto sa placeholder, naglaum alang sa pipila pa nga mga panabut, o pipila nga gitago nga itlog sa Pasko sa Pagkabanhaw. Usa ka joke, tingali. Ikasubo, wala'y usa niini dinhi.

html

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