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.

Pada halaman ini

Angkat kepala! Pastikan anda membaca halaman Grid terlebih dahulu sebelum menyelami cara mengubah suai dan menyesuaikan lajur grid anda.

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

Satu daripada tiga lajur

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>

Satu daripada tiga lajur

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>

Penjajaran mendatar

Satu daripada dua lajur

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>

Pembalut lajur

Jika lebih daripada 12 lajur diletakkan dalam satu baris, setiap kumpulan lajur tambahan akan, sebagai satu unit, membalut pada baris baharu.

.col-9

.col-4
Sejak 9 + 4 = 13 > 12, div lebar 4 lajur ini akan dibalut pada baris baharu sebagai satu unit bersebelahan.

.col-6
Lajur berikutnya diteruskan di sepanjang baris baharu.

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 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 .rows, tetapi tidak setiap kaedah pelaksanaan boleh mengambil kira ini.

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

Anda juga boleh menggunakan rehat ini pada titik putus tertentu dengan utiliti paparan responsif kami .

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

Menyusun semula

Memesan kelas

Gunakan .order-kelas untuk mengawal susunan visual kandungan anda. Kelas ini responsif, jadi anda boleh menetapkan ordertitik putus mengikut (cth, .order-1.order-md-2). Termasuk sokongan untuk 1melalui 5semua enam peringkat grid.

Pertama dalam DOM, tiada pesanan digunakan

Kedua dalam DOM, dengan susunan yang lebih besar

Ketiga dalam DOM, dengan susunan 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>

Terdapat juga kelas responsif .order-firstdan .order-lastyang menukar orderelemen dengan menggunakan order: -1dan order: 6, masing-masing. Kelas ini juga boleh dicampur dengan .order-*kelas bernombor mengikut keperluan.

Pertama di DOM, dipesan terakhir

Kedua dalam DOM, tidak tersusun

Ketiga dalam DOM, dipesan dahulu

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>

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 dengan lebar offset berubah-ubah.

Kelas mengimbangi

Alihkan lajur ke kanan menggunakan .offset-md-*kelas. Kelas ini meningkatkan margin kiri lajur dengan *lajur. Sebagai contoh, .offset-md-4bergerak .col-md-4ke atas empat lajur.

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

Selain mengosongkan lajur pada titik putus responsif, anda mungkin perlu menetapkan semula offset. Lihat ini dalam tindakan dalam contoh 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>

Utiliti margin

Dengan beralih ke flexbox dalam v4, anda boleh menggunakan utiliti margin seperti .me-automemaksa lajur adik-beradik menjauhi satu sama lain.

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

Kelas lajur kendiri

Kelas .col-*juga boleh digunakan di luar a .rowuntuk memberikan elemen lebar tertentu. Apabila kelas lajur digunakan sebagai anak bukan langsung baris, pelapik akan ditinggalkan.

.col-3: lebar 25%

.col-sm-9: lebar 75% di atas titik putus sm

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 boleh digunakan bersama-sama dengan utiliti untuk mencipta imej terapung responsif. Pastikan anda membungkus kandungan dalam .clearfixpembungkus 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.

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>