Bagaimanakah cara membuat lajur berbilang baris dalam Bootstrap 3 dan Bootstrap 4?-tutorial css-php.cn

Bagaimanakah cara membuat lajur berbilang baris dalam Bootstrap 3 dan Bootstrap 4?

Susan Sarandon

Lepaskan： 2024-11-30 22:43:20

asal

187 orang telah melayarinya

How do I create multi-row columns in Bootstrap 3 and Bootstrap 4?

Lajur Bootstrap Berbilang Baris

Masalah:
Membuat grid Bootstrap di mana lajur tertentu merentangi berbilang baris, terutamanya apabila kotak dijana secara pemrograman dalam jujukan.

Penyelesaian:

Bootstrap 3:

Buat div .row luar untuk menentukan keseluruhan lebar kandungan.
Di dalam baris luar, tambahkan div lajur (
) untuk merentangi dua baris.
Buat satu lagi baris .dalam dalam lajur dua baris.
Tambah div lajur anak (
) dalam baris dalam( s) mengikut keperluan untuk mengisi ruang yang tinggal.

Bootstrap 4:

Buat div .bendalir luar atau .bendalir bekas untuk menentukan lebar kandungan.
Tambah div .baris luar.
Di dalam baris luar, tambahkan div lajur (
) untuk menjangkau dua baris.
Buat baris .dalam yang lain dalam lajur dua baris menggunakan kelas .w-100 pada div lajur dalam (
) untuk memaksanya menjangkau lebar penuh.
Tambah div lajur anak (
) dalam baris dalam seperti yang diperlukan untuk mengisi baki ruang.

Contoh Kod:

Bootstrap 3:

<div class="row">
  <div class="col-md-4">
    <div class="well">1
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
        <div class="well">2</div>
      </div>
      <div class="col-md-6">
        <div class="well">3</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="well">4</div>
      </div>
      <div class="col-md-6">
        <div class="well">5</div>
      </div>
    </div>
  </div>
</div><p><strong>Bootstrap 4: </strong></p>
<pre class="brush:php;toolbar:false"><div class="container">
  <div class="row">
    <div class="col">
      <div class="well">1
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>
    </div>
    <div class="row w-100">
      <div class="col">
        <div class="well">2</div>
      </div>
      <div class="col">
        <div class="well">3</div>
      </div>
    </div>
    <div class="row w-100">
      <div class="col">
        <div class="well">4</div>
      </div>
      <div class="col">
        <div class="well">5</div>
      </div>
    </div>
  </div>
</div>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah cara membuat lajur berbilang baris dalam Bootstrap 3 dan Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!