Kolom

Diajar kumaha ngarobih kolom kalayan sababaraha pilihan pikeun alignment, mesen, sareng offsetting berkat sistem grid flexbox kami. Tambih Deui, tingali kumaha ngagunakeun kelas kolom pikeun ngatur rubak elemen non-grid.

Dina kaca ieu

Mastaka tegak! Pastikeun maca halaman Grid heula sateuacan nyilem kana cara ngarobih sareng ngaropea kolom grid anjeun.

Kumaha aranjeunna dianggo

Kolom diwangun dina arsitektur flexbox grid urang. Flexbox hartosna urang gaduh pilihan pikeun ngarobih kolom individu sareng ngarobih grup kolom dina tingkat baris . Anjeun milih kumaha kolom tumuwuh, ngaleutikan, atawa lamun heunteu robah.
Nalika ngawangun layouts grid, sadaya eusi mana dina kolom. Hierarki grid Bootstrap mana ti wadah ka baris ka kolom ka eusi Anjeun. Dina kaayaan anu jarang, anjeun tiasa ngahijikeun eusi sareng kolom, tapi émut yén aya akibat anu teu dihaja.
Bootstrap kalebet kelas anu tos siap pikeun nyiptakeun tata letak anu gancang sareng responsif. Kalawan genep breakpoints sarta belasan kolom dina unggal undakan grid, kami boga puluhan kelas geus diwangun pikeun anjeun nyieun layouts dipikahoyong. Ieu tiasa ditumpurkeun via Sass upami anjeun hoyong.

Ngajajar

Paké flexbox alignment utiliti pikeun vertikal sarta horizontal align kolom.

alignment nangtung

Salah sahiji tilu kolom

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

Salah sahiji tilu kolom

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

alignment horizontal

Salah sahiji dua kolom

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

Bungkus kolom

Lamun leuwih ti 12 kolom disimpen dina hiji baris, unggal grup kolom tambahan bakal, salaku hiji unit, mungkus kana garis anyar.

.col-9

.col-4
Kusabab 9 + 4 = 13 > 12, div 4-kolom-lega ieu bakal dibungkus kana garis anyar salaku hiji unit contiguous.

.col-6
kolom saterusna nuluykeun sapanjang garis anyar.

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

Kolom ngarecah

Megatkeun kolom ka garis anyar dina flexbox merlukeun hack leutik: tambahkeun hiji unsur jeung width: 100%dimana wae Anjeun hoyong mungkus kolom anjeun ka garis anyar. Biasana ieu dilakonan ku sababaraha .rows, tapi teu unggal palaksanaan metoda bisa akun pikeun ieu.

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

Anjeun ogé tiasa nerapkeun istirahat ieu dina titik putus khusus sareng utilitas tampilan responsif kami .

.col-6 .col-sm-4

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

Susunan deui

Mesen kelas

Paké .order-kelas pikeun ngadalikeun urutan visual eusi Anjeun. Kelas ieu responsif, ku kituna anjeun tiasa nyetél orderku breakpoint (contona, .order-1.order-md-2). Ngawengku rojongan pikeun 1ngaliwatan 5sakuliah genep tiers grid.

Kahiji di DOM, euweuh urutan dilarapkeun

Kadua dina DOM, kalayan urutan anu langkung ageung

Katilu dina DOM, kalayan urutan 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>

Aya ogé kelas responsif .order-firstsareng .order-lastanu ngarobih orderunsur ku nerapkeun order: -1sareng order: 6masing-masing. Kelas-kelas ieu ogé tiasa dicampurkeun sareng .order-*kelas anu wilanganana upami diperyogikeun.

Kahiji di DOM, maréntahkeun panungtungan

Kadua di DOM, unordered

Katilu di DOM, maréntahkeun munggaran

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

Ngimbangkeun kolom

Anjeun tiasa ngimbangan kolom grid ku dua cara: .offset-kelas grid responsif kami sareng utilitas margin kami . Kelas grid ukuranana cocog kolom bari margins leuwih mangpaat pikeun layouts gancang dimana lebar offset nyaeta variabel.

kelas offset

Pindahkeun kolom ka katuhu nganggo .offset-md-*kelas. Kelas ieu ningkatkeun margin kénca kolom ku *kolom. Contona, .offset-md-4ngalir .col-md-4ngaliwatan opat kolom.

.col-md-4

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

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

.col-md-6 .offset-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>

Salian ngabersihan kolom dina titik putus responsif, anjeun panginten kedah ngareset offset. Tempo ieu aksi dina conto 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

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

Utiliti margin

Kalayan pindah ka flexbox di v4, anjeun tiasa nganggo utilitas margin sapertos .me-automaksakeun kolom duduluran ti hiji anu sanés.

.col-md-4

.col-md-4 .ms-otomatis

.col-md-3 .ms-md-otomatis

.col-otomatis .kuring-otomatis

.col-otomatis

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

Kelas kolom mandiri

The .col-*kelas ogé bisa dipaké di luar a .rowmasihan hiji unsur lebar husus. Iraha kelas kolom dipaké salaku barudak non-langsung baris, paddings disingkahkeun.

.col-3: rubak 25%

.col-sm-9: rubak 75% luhureun sm breakpoint

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

Kelas tiasa dianggo sareng utilitas pikeun nyiptakeun gambar ngambang responsif. Pastikeun pikeun mungkus eusi dina .clearfixwrapper pikeun mupus float lamun téks téh pondok.

Hiji paragraf téks placeholder. Kami nganggo éta di dieu pikeun nunjukkeun panggunaan kelas clearfix. Kami nambihan sababaraha frasa anu teu aya artina di dieu pikeun nunjukkeun kumaha kolom berinteraksi di dieu sareng gambar anu ngambang.

Salaku bisa ningali paragraf gracefully mungkus sabudeureun gambar floated. Ayeuna bayangkeun kumaha ieu bakal kasampak kalawan sababaraha eusi sabenerna di dieu, tinimbang ngan ieu téks placeholder boring nu nuluykeun sarta on, tapi sabenerna conveys euweuh informasi tangible di. Éta ngan ukur butuh rohangan sareng henteu kedah dibaca.

Najan kitu, di dieu anjeun, tetep persevering dina maca téks placeholder ieu, hoping sababaraha wawasan deui, atawa sababaraha endog Easter disumputkeun eusi. A lulucon, meureun. Hanjakalna, teu aya di dieu.

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