Kolom

Sinau carane ngowahi kolom kanthi sawetara opsi kanggo nyelarasake, ngurutake, lan ngimbangi amarga sistem kothak flexbox kita. Kajaba iku, deleng carane nggunakake kelas kolom kanggo ngatur jembare unsur non-grid.

Ing kaca iki

Kepala munggah! Priksa manawa sampeyan maca kaca Grid dhisik sadurunge nyilem babagan carane ngowahi lan ngatur kolom kothak sampeyan.

Carane padha bisa

Kolom dibangun ing arsitektur flexbox kothak. Flexbox tegese kita duwe pilihan kanggo ngganti kolom individu lan ngowahi klompok kolom ing tingkat baris . Sampeyan milih carane kolom tuwuh, nyilikake, utawa ngganti.
Nalika nggawe tata letak kothak, kabeh isi dadi kolom. Hierarki kothak Bootstrap dadi saka wadhah menyang baris menyang kolom menyang konten sampeyan. Ing kesempatan langka, sampeyan bisa gabungke isi lan kolom, nanging kudu ngerti ana konsekuensi sing ora disengaja.
Bootstrap kalebu kelas sing wis ditemtokake kanggo nggawe tata letak sing cepet lan responsif. Kanthi enem breakpoints lan rolas kolom ing saben undakan kothak, kita duwe Welasan kelas wis dibangun kanggo sampeyan nggawe tata letak sing dikarepake. Iki bisa dipateni liwat Sass yen sampeyan pengin.

Alignment

Gunakake utilitas alignment flexbox kanggo nyelarasake kolom vertikal lan horisontal.

Alignment vertikal

Salah siji saka telung kolom

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>

Salah siji saka telung kolom

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>

Alignment horisontal

Salah siji saka rong kolom

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>

Pambungkus kolom

Yen luwih saka 12 kolom diselehake ing baris siji, saben klompok kolom ekstra bakal, minangka siji unit, mbungkus menyang baris anyar.

.col-9

.col-4
Wiwit 9 + 4 = 13 > 12, div 4-kolom-sudhut iki bakal kebungkus menyang baris anyar minangka siji unit contiguous.

.col-6
Kolom sakteruse terus ing baris anyar.

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>

Pecah kolom

Mbusak kolom menyang baris anyar ing flexbox mbutuhake hack cilik: nambah unsur ing width: 100%ngendi wae sampeyan pengin mbungkus kolom menyang baris anyar. Biasane iki wis rampung karo sawetara .rows, nanging ora saben cara implementasine bisa akun iki.

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

Sampeyan uga bisa nglamar istirahat iki ing breakpoints tartamtu karo utilitas tampilan responsif .

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

Ngatur maneh

Mesen kelas

Gunakake .order-kelas kanggo ngontrol urutan visual konten sampeyan. Kelas iki responsif, supaya sampeyan bisa nyetel orderbreakpoint (contone, .order-1.order-md-2). Kalebu dhukungan kanggo 1liwat 5kabeh enem undakan kothak.

Pisanan ing DOM, ora ana urutan sing ditrapake

Kapindho ing DOM, kanthi urutan sing luwih gedhe

Katelu ing DOM, kanthi urutan 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>

Ana uga responsif .order-firstlan .order-lastkelas sing ngganti orderunsur kanthi nglamar order: -1lan order: 6, mungguh. Kelas kasebut uga bisa dicampur karo .order-*kelas sing dinomer yen perlu.

Pisanan ing DOM, dhawuh pungkasan

Kapindho ing DOM, unordered

Katelu ing DOM, dhawuh dhisik

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>

Ngimbangi kolom

Sampeyan bisa ngimbangi kolom kothak kanthi rong cara: .offset-kelas kothak responsif lan utilitas margin . Kelas kothak ukuran kanggo cocog kolom nalika wates luwih migunani kanggo tata letak cepet ngendi jembaré offset iku maneko rupo.

Offset kelas

Pindhah kolom menyang tengen nggunakake .offset-md-*kelas. Kelas iki nambah wates kiwa kolom kanthi *kolom. Contone, .offset-md-4gerakane .col-md-4liwat papat kolom.

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

Saliyane ngresiki kolom ing breakpoints responsif, sampeyan bisa uga kudu ngreset offset. Deleng tumindak iki ing conto kothak .

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

Utilitas margin

Kanthi pamindhahan menyang flexbox ing v4, sampeyan bisa nggunakake utilitas wates kaya .me-automeksa kolom sedulur saka siji liyane.

.col-md-4

.col-md-4 .ms-otomatis

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

.col-otomatis .aku-otomatis

.col-otomatis

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>

Kelas kolom mandiri

Kelas .col-*uga bisa digunakake ing njaba .rowkanggo menehi unsur jembar tartamtu. Kapan kelas kolom digunakake minangka anak non-langsung saka baris, paddings tilar.

.col-3: jembaré 25%

.col-sm-9: jembaré saka 75% ndhuwur 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>

Kelas bisa digunakake bebarengan karo keperluan kanggo nggawe gambar floated responsif. Priksa manawa kanggo mbungkus isi ing .clearfixbungkus kanggo mbusak float yen teks luwih cendhek.

Paragraf teks placeholder. Kita nggunakake kene kanggo nuduhake panggunaan kelas clearfix. Kita nambahake sawetara frasa sing ora ana gunane ing kene kanggo nduduhake carane kolom sesambungan ing kene karo gambar sing ngambang.

Nalika sampeyan bisa ndeleng paragraf anggun mbungkus gambar ngambang. Saiki mbayangno carane iki bakal katon karo sawetara isi nyata ing kene, tinimbang mung iki mboseni placeholder teks sing terus lan ing, nanging bener conveys ora informasi nyata ing. Iku mung njupuk spasi lan ora kudu diwaca.

Nanging, ing kene sampeyan isih tetep maca teks placeholder iki, ngarep-arep sawetara wawasan liyane, utawa konten endhog Paskah sing didhelikake. A guyon, mbok menawa. Sayange, ora ana sing ana ing kene.

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>