Bagaimana untuk Menambah Margin Teratas pada Baris dalam Twitter Bootstrap Tanpa Mengubahsuai Kelas \'baris\'?

Barbara Streisand
Lepaskan: 2024-10-29 01:50:30
asal
619 orang telah melayarinya

How to Add Top Margin to Rows in Twitter Bootstrap Without Modifying the

Menambahkan Margin Teratas pada Baris dalam Twitter Bootstrap

Rangka kerja Twitter Bootstrap menyediakan cara yang mudah untuk mencipta reka letak responsif. Walau bagaimanapun, mungkin ada kalanya anda perlu menambah margin atas tambahan pada elemen baris. Walaupun tergoda untuk mengubah suai kelas "baris" sedia ada, ia tidak disyorkan kerana ini boleh menyebabkan konflik dengan penggayaan teras rangka kerja.

Penyelesaian:

Daripada mengubah suai kelas "baris", buat kelas baharu yang dipanggil "penampan atas" yang menambah jidar yang dikehendaki. Begini cara untuk melakukannya:

  1. Dalam fail CSS anda, tambahkan kod berikut:
<code class="css">.top-buffer { margin-top: 20px; }</code>
Salin selepas log masuk
  1. Gunakan kelas "top-buffer" pada elemen baris di mana anda ingin menambah jidar atas:
<code class="html"><div class="row top-buffer">
    ...
</div></code>
Salin selepas log masuk

Dengan mencipta kelas berasingan, anda boleh menyasarkan baris tertentu sambil mengekalkan kelakuan lalai kelas "baris" untuk situasi lain. Pendekatan ini mengekalkan integriti rangka kerja Bootstrap sambil membenarkan anda menyesuaikan reka letak anda mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Margin Teratas pada Baris dalam Twitter Bootstrap Tanpa Mengubahsuai Kelas \'baris\'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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