Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menambah Jarak Responsif Antara Lajur Bootstrap?

Bagaimana untuk Menambah Jarak Responsif Antara Lajur Bootstrap?

Barbara Streisand
Lepaskan: 2024-12-06 15:31:12
asal
260 orang telah melayarinya

How to Add Responsive Spacing Between Bootstrap Columns?

Cara Membuat Jarak Antara Lajur Bootstrap

Untuk memasukkan ruang antara lajur dalam Bootstrap, ikut langkah berikut:

Soalan:

Bagaimana anda menambah ruang antara dua lajur yang akan melaraskan lebar lajur secara automatik untuk mengimbangi jarak?

Jawapan:

Balut lajur dalam satu baris dan dalam setiap lajur, sarang yang lain lajur dengan lebar yang sama dengan induk lajur:

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">Your Content</div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">More Content</div>
  </div>
</div>
Salin selepas log masuk

Penjelasan:

Teknik ini mencipta "longkang" antara lajur bersarang, yang mewarisi lebar penuh lajur induknya. Parit terbina dalam Bootstrap akan menjarakkan elemen secara sekata secara automatik.

Contoh:

[Imej lajur berjarak dengan longkang yang dibuat menggunakan pendekatan lajur bersarang]

Atas ialah kandungan terperinci Bagaimana untuk Menambah Jarak Responsif Antara Lajur Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan