Mga hanay

Matutunan kung paano baguhin ang mga column na may ilang mga opsyon para sa pag-align, pag-order, at pag-offset salamat sa aming flexbox grid system. Dagdag pa, tingnan kung paano gamitin ang mga klase ng column upang pamahalaan ang mga lapad ng mga elementong hindi grid.

Sa pahinang ito

Heads up! Siguraduhing basahin muna ang Grid page bago sumabak sa kung paano baguhin at i-customize ang iyong mga grid column.

Paano sila gumagana

Bumuo ang mga column sa flexbox architecture ng grid. Ang ibig sabihin ng Flexbox ay mayroon kaming mga opsyon para sa pagpapalit ng mga indibidwal na column at pagbabago ng mga pangkat ng mga column sa antas ng row . Pinipili mo kung paano lumalaki, lumiliit, o nagbabago ang mga column.
Kapag gumagawa ng mga layout ng grid, lahat ng nilalaman ay napupunta sa mga column. Ang hierarchy ng grid ng Bootstrap ay napupunta mula sa lalagyan patungo sa hilera hanggang hanay sa iyong nilalaman. Sa mga bihirang pagkakataon, maaari mong pagsamahin ang nilalaman at column, ngunit magkaroon ng kamalayan na maaaring magkaroon ng hindi sinasadyang mga kahihinatnan.
Kasama sa Bootstrap ang mga paunang natukoy na klase para sa paggawa ng mabilis, tumutugon na mga layout. Sa anim na breakpoint at isang dosenang column sa bawat grid tier, mayroon kaming dose-dosenang mga klase na binuo na para sa iyo upang gawin ang iyong mga gustong layout. Maaari itong i-disable sa pamamagitan ng Sass kung gusto mo.

Pag-align

Gumamit ng flexbox alignment utilities para patayo at pahalang na ihanay ang mga column.

Pahalang na linya

Isa sa tatlong column

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>

Isa sa tatlong column

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>

Pahalang na pagkakahanay

Isa sa dalawang column

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>

Pagbabalot ng column

Kung higit sa 12 column ang inilagay sa loob ng iisang row, ang bawat pangkat ng mga karagdagang column ay, bilang isang unit, magbalot sa isang bagong linya.

.col-9

.col-4
Dahil 9 + 4 = 13 > 12, ang 4-column-wide div na ito ay nababalot sa isang bagong linya bilang isang magkadikit na unit.

.col-6 Ang
mga kasunod na column ay nagpapatuloy sa bagong 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 column break

Ang paghahati ng mga column sa isang bagong linya sa flexbox ay nangangailangan ng maliit na hack: magdagdag ng elemento kung width: 100%saan mo gustong ibalot ang iyong mga column sa isang bagong linya. Karaniwan ito ay nagagawa sa maraming .rows, ngunit hindi lahat ng paraan ng pagpapatupad ay maaaring isaalang-alang ito.

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

Maaari mo ring ilapat ang pahingang ito sa mga partikular na breakpoint sa aming mga tumutugon na mga kagamitan sa pagpapakita .

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

Muling pag-aayos

Mag-order ng mga klase

Gumamit .order-ng mga klase para sa pagkontrol sa visual order ng iyong content. Ang mga klaseng ito ay tumutugon, kaya maaari mong itakda ang orderby breakpoint (hal., .order-1.order-md-2). May kasamang suporta para sa 1lahat ng 5anim na grid tier.

Una sa DOM, walang order na inilapat

Pangalawa sa DOM, na may mas malaking pagkakasunud-sunod

Pangatlo sa DOM, na may order na 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>

Mayroon ding tumutugon .order-firstat .order-lastmga klase na nagbabago orderng isang elemento sa pamamagitan ng paglalapat order: -1at order: 6, ayon sa pagkakabanggit. Ang mga klase na ito ay maaari ding ihalo sa mga may bilang .order-*na klase kung kinakailangan.

Una sa DOM, huling na-order

Pangalawa sa DOM, hindi nakaayos

Pangatlo sa DOM, inorder muna

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 ng mga column

Maaari mong i-offset ang mga column ng grid sa dalawang paraan: ang aming mga tumutugon .offset-na klase ng grid at ang aming mga margin utility . Ang mga klase ng grid ay sukat upang tumugma sa mga column habang ang mga margin ay mas kapaki-pakinabang para sa mabilis na mga layout kung saan ang lapad ng offset ay variable.

Offset na mga klase

Ilipat ang mga column sa kanan gamit ang mga .offset-md-*klase. Ang mga klase na ito ay nagdaragdag sa kaliwang margin ng isang column sa pamamagitan ng mga *column. Halimbawa, .offset-md-4gumagalaw .col-md-4sa apat na column.

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

Bilang karagdagan sa pag-clear ng column sa mga tumutugong breakpoint, maaaring kailanganin mong i-reset ang mga offset. Tingnan ito sa pagkilos sa halimbawa ng 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 margin utility

Sa paglipat sa flexbox sa v4, maaari mong gamitin ang mga margin utilities tulad ng .me-autopuwersahin ang magkapatid na column na palayo sa isa't isa.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

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>

Mga standalone na klase ng column

Ang .col-*mga klase ay maaari ding gamitin sa labas ng isang .rowupang bigyan ang isang elemento ng isang tiyak na lapad. Sa tuwing ginagamit ang mga klase ng column bilang hindi direktang mga bata ng isang row, ang mga padding ay inaalis.

.col-3: lapad ng 25%

.col-sm-9: lapad na 75% sa itaas ng 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 ay maaaring gamitin kasama ng mga kagamitan upang lumikha ng mga tumutugon na lumutang na imahe. Siguraduhing ibalot ang content sa isang .clearfixwrapper para ma-clear ang float kung mas maikli ang text.

Isang talata ng teksto ng placeholder. Ginagamit namin ito dito upang ipakita ang paggamit ng klase ng clearfix. Nagdaragdag kami ng ilang walang kabuluhang parirala dito upang ipakita kung paano nakikipag-ugnayan ang mga column dito sa lumutang na imahe.

Tulad ng nakikita mo na ang mga talata ay maganda na bumabalot sa lumutang na imahe. Ngayon isipin kung ano ang magiging hitsura nito sa ilang aktwal na nilalaman dito, sa halip na ang nakakainip na placeholder na text na ito na nagpapatuloy, ngunit talagang hindi nagbibigay ng nakikitang impormasyon sa. Ito ay tumatagal lamang ng espasyo at hindi talaga dapat basahin.

At gayon pa man, narito ka, nagpupursige pa ring basahin ang teksto ng placeholder na ito, umaasa para sa ilang higit pang mga insight, o ilang nakatagong easter egg ng nilalaman. Isang biro, marahil. Sa kasamaang palad, walang ganyan dito.

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>