kolom
Pelajari cara memodifikasi kolom dengan beberapa opsi untuk penyelarasan, pengurutan, dan penyeimbangan berkat sistem kisi flexbox kami. Plus, lihat cara menggunakan kelas kolom untuk mengelola lebar elemen non-kisi.
Bagaimana mereka bekerja?
-
Kolom dibangun di atas arsitektur flexbox grid. Flexbox berarti kami memiliki opsi untuk mengubah kolom individual dan memodifikasi grup kolom pada tingkat baris . Anda memilih bagaimana kolom tumbuh, menyusut, atau berubah.
-
Saat membangun tata letak kisi, semua konten masuk dalam kolom. Hirarki kisi Bootstrap beralih dari wadah ke baris ke kolom ke konten Anda. Pada kesempatan yang jarang, Anda dapat menggabungkan konten dan kolom, tetapi perlu diketahui bahwa mungkin ada konsekuensi yang tidak diinginkan.
-
Bootstrap menyertakan kelas yang telah ditentukan sebelumnya untuk membuat tata letak yang cepat dan responsif. Dengan enam breakpoint dan selusin kolom di setiap tingkat kisi, kami memiliki lusinan kelas yang sudah dibuat untuk Anda membuat tata letak yang diinginkan. Ini dapat dinonaktifkan melalui Sass jika Anda mau.
Penyelarasan
Gunakan utilitas perataan flexbox untuk menyelaraskan kolom secara vertikal dan horizontal.
Perataan vertikal
<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>
<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>
Perataan horizontal
<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>
Pembungkus kolom
Jika lebih dari 12 kolom ditempatkan dalam satu baris, setiap kelompok kolom tambahan akan, sebagai satu unit, membungkus ke baris baru.
Sejak 9 + 4 = 13 > 12, div lebar 4-kolom ini dibungkus ke baris baru sebagai satu unit yang berdekatan.
Kolom berikutnya berlanjut di sepanjang baris baru.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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>
Istirahat kolom
Memutus kolom ke baris baru di flexbox memerlukan sedikit peretasan: tambahkan elemen di width: 100%
mana pun Anda ingin membungkus kolom ke baris baru. Biasanya ini dilakukan dengan beberapa .row
s, tetapi tidak setiap metode implementasi dapat menjelaskan hal ini.
<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>
Anda juga dapat menerapkan jeda ini pada titik henti sementara tertentu dengan utilitas tampilan responsif kami .
<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>
Menata ulang
Pesan kelas
Gunakan .order-
kelas untuk mengontrol urutan visual konten Anda. Kelas-kelas ini responsif, sehingga Anda dapat mengatur order
breakpoint berdasarkan (mis., .order-1.order-md-2
). Termasuk dukungan untuk 1
melalui 5
semua enam tingkatan grid.
<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>
Ada juga kelas responsif .order-first
dan .order-last
yang mengubah order
elemen dengan menerapkan order: -1
dan order: 6
, masing-masing. Kelas-kelas ini juga dapat dicampur dengan .order-*
kelas-kelas bernomor sesuai kebutuhan.
<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>
Mengimbangi kolom
Anda dapat mengimbangi kolom kisi dengan dua cara: .offset-
kelas kisi responsif dan utilitas margin kami . Kelas kisi berukuran untuk mencocokkan kolom sementara margin lebih berguna untuk tata letak cepat di mana lebar offset bervariasi.
Kelas offset
Pindahkan kolom ke kanan menggunakan .offset-md-*
kelas. Kelas-kelas ini meningkatkan margin kiri kolom demi *
kolom. Misalnya, .offset-md-4
bergerak .col-md-4
di atas empat kolom.
<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>
Selain pembersihan kolom pada breakpoint responsif, Anda mungkin perlu mengatur ulang offset. Lihat ini beraksi dalam contoh grid .
<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>
Utilitas margin
Dengan pindah ke flexbox di v4, Anda dapat menggunakan utilitas margin seperti .me-auto
memaksa kolom saudara menjauh satu sama lain.
<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
Kelas .col-*
juga dapat digunakan di luar a .row
untuk memberi elemen lebar tertentu. Setiap kali kelas kolom digunakan sebagai turunan tidak langsung dari sebuah baris, padding dihilangkan.
<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>
The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a .clearfix
wrapper to clear the float if the text is shorter.
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.
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.
Namun, di sinilah Anda, masih bertahan dalam membaca teks placeholder ini, berharap untuk beberapa wawasan lebih, atau beberapa telur paskah tersembunyi dari konten. Sebuah lelucon, mungkin. Sayangnya, tidak ada semua itu di sini.
<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>