Lajur
Ketahui cara mengubah suai lajur dengan beberapa pilihan untuk penjajaran, susunan dan mengimbangi terima kasih kepada sistem grid flexbox kami. Selain itu, lihat cara menggunakan kelas lajur untuk mengurus lebar elemen bukan grid.
Bagaimana mereka bekerja
-
Lajur dibina pada seni bina kotak fleksibel grid. Flexbox bermakna kami mempunyai pilihan untuk menukar lajur individu dan mengubah suai kumpulan lajur pada peringkat baris . Anda memilih cara lajur berkembang, mengecut atau sebaliknya berubah.
-
Apabila membina reka letak grid, semua kandungan dimasukkan ke dalam lajur. Hierarki grid Bootstrap pergi dari bekas ke baris ke lajur ke kandungan anda. Pada masa yang jarang berlaku, anda boleh menggabungkan kandungan dan lajur, tetapi sedar mungkin terdapat akibat yang tidak diingini.
-
Bootstrap termasuk kelas yang dipratentukan untuk mencipta reka letak yang pantas dan responsif. Dengan enam titik putus dan sedozen lajur pada setiap peringkat grid, kami mempunyai berpuluh-puluh kelas yang telah dibina untuk anda membuat reka letak yang anda inginkan. Ini boleh dilumpuhkan melalui Sass jika anda mahu.
Penjajaran
Gunakan utiliti penjajaran flexbox untuk menjajarkan lajur secara menegak dan mendatar.
Penjajaran menegak
<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>
Penjajaran mendatar
<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>
Pembalut lajur
Jika lebih daripada 12 lajur diletakkan dalam satu baris, setiap kumpulan lajur tambahan akan, sebagai satu unit, membalut pada baris baharu.
Sejak 9 + 4 = 13 > 12, div lebar 4 lajur ini akan dibalut pada baris baharu sebagai satu unit bersebelahan.
Lajur berikutnya diteruskan di sepanjang baris baharu.
<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>
Pecah lajur
Memecahkan lajur kepada baris baharu dalam flexbox memerlukan penggodaman kecil: tambah elemen dengan mana- width: 100%
mana sahaja anda mahu membungkus lajur anda ke baris baharu. Biasanya ini dicapai dengan berbilang .row
s, tetapi tidak setiap kaedah pelaksanaan boleh mengambil kira 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 boleh menggunakan rehat ini pada titik putus tertentu dengan utiliti paparan 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>
Menyusun semula
Memesan kelas
Gunakan .order-
kelas untuk mengawal susunan visual kandungan anda. Kelas ini responsif, jadi anda boleh menetapkan order
titik putus mengikut (cth, .order-1.order-md-2
). Termasuk sokongan untuk 1
melalui 5
semua enam peringkat 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>
Terdapat juga kelas responsif .order-first
dan .order-last
yang menukar order
elemen dengan menggunakan order: -1
dan order: 6
, masing-masing. Kelas ini juga boleh dicampur dengan .order-*
kelas bernombor mengikut keperluan.
<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 lajur
Anda boleh mengimbangi lajur grid dalam dua cara: .offset-
kelas grid responsif kami dan utiliti margin kami . Kelas grid bersaiz untuk memadankan lajur manakala margin lebih berguna untuk susun atur pantas di mana lebar offset berubah-ubah.
Kelas mengimbangi
Alihkan lajur ke kanan menggunakan .offset-md-*
kelas. Kelas ini meningkatkan margin kiri lajur dengan *
lajur. Contohnya, .offset-md-4
bergerak .col-md-4
ke atas empat lajur.
<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 mengosongkan lajur pada titik putus responsif, anda mungkin perlu menetapkan semula offset. Lihat ini dalam tindakan 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>
Utiliti margin
Dengan beralih ke flexbox dalam v4, anda boleh menggunakan utiliti margin seperti .me-auto
memaksa lajur adik-beradik dari 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 lajur kendiri
Kelas .col-*
juga boleh digunakan di luar a .row
untuk memberikan elemen lebar tertentu. Apabila kelas lajur digunakan sebagai anak bukan langsung baris, pelapik akan ditinggalkan.
<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 boleh digunakan bersama-sama dengan utiliti untuk mencipta imej terapung responsif. Pastikan anda membungkus kandungan dalam .clearfix
pembungkus untuk membersihkan pelampung jika teks lebih pendek.
Perenggan teks pemegang tempat. Kami menggunakannya di sini untuk menunjukkan penggunaan kelas clearfix. Kami menambah beberapa frasa tidak bermakna di sini untuk menunjukkan cara lajur berinteraksi di sini dengan imej terapung.
Seperti yang anda boleh lihat perenggan dengan anggun membungkus imej terapung. Sekarang bayangkan bagaimana ini akan kelihatan dengan beberapa kandungan sebenar di sini, bukannya hanya teks pemegang tempat yang membosankan ini yang berterusan dan berterusan, tetapi sebenarnya tidak menyampaikan maklumat yang ketara di. Ia hanya mengambil ruang dan tidak sepatutnya dibaca.
Namun begitu, inilah anda, masih gigih membaca teks pemegang tempat ini, mengharapkan beberapa lagi cerapan atau kandungan telur paskah yang tersembunyi. Jenaka, mungkin. Malangnya, tiada satu pun 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>