Bagaimana untuk Siram Pengaki ke Bawah dalam Twitter Bootstrap?

Menyiram Pengaki dalam Twitter Bootstrap

Menyiram pengaki ke bahagian bawah halaman ialah tugas biasa dalam reka bentuk web. Walau bagaimanapun, untuk mencapai ini boleh menjadi mencabar apabila menggunakan rangka kerja responsif seperti Twitter Bootstrap.

Memahami Isu

Sifat responsif Bootstrap boleh mengganggu kaedah pembilasan footer tradisional, yang sering bergantung kepada pada ketinggian tetap atau margin bawah. Akibatnya, pengaki mungkin tidak sentiasa berada di bahagian bawah halaman pada saiz skrin yang berbeza.

Menyelesaikan Isu dalam Bootstrap 2.2.1 dan Kemudian

Bootstrap kini termasuk penyelesaian terbina dalam untuk flushing footer yang dipanggil komponen navbar. Untuk menggunakannya, cuma tambah kelas ".navbar-fixed-bottom" pada navbar:

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 3.x dan 4.x

Untuk Bootstrap 3.x dan 4.x, pendekatan yang sama digunakan. Gunakan komponen navbar dengan kelas ".fixed-bottom":

<div class="navbar fixed-bottom"></div>

Untuk memastikan kandungan halaman tidak dilindungi, ingat untuk menambah peraturan CSS berikut:

body {
  padding-bottom: 70px;
}

Kesimpulan

Kaedah ini menyediakan cara yang berkesan untuk menyiram pengaki ke bahagian bawah halaman dalam Bootstrap. Dengan menggunakan komponen bar navigasi terbina dalam, anda boleh membuat reka letak pengaki yang responsif dan konsisten.

Atas ialah kandungan terperinci Bagaimana untuk Siram Pengaki ke Bawah dalam Twitter Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!