Bagaimana untuk Mencegah Pertindihan Navbar pada Kandungan Halaman dalam Reka Letak Responsif?

Kandungan Halaman Bertindih Navbar: Penyelesaian untuk Reka Letak Responsif

Apabila menggunakan navbar atas Twitter Bootstrap dengan pilihan atas tetap, ia mungkin menghalang kandungan yang terletak berhampiran bahagian atas halaman. Isu ini amat ketara dalam reka letak responsif.

Untuk memastikan bar navigasi tidak menyekat kandungan, pelapik hendaklah ditambahkan pada elemen badan. Walau bagaimanapun, nilai padding statik tidak mencukupi untuk reka bentuk responsif.

Penyelesaian untuk Reka Letak Responsif:

Coretan kod CSS berikut menyediakan penyelesaian yang melaraskan padding secara dinamik berdasarkan lebar tetingkap:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Kod ini menggunakan padding atas 60px pada elemen badan. Walau bagaimanapun, apabila lebar tetingkap jatuh di bawah 979px, bahagian atas padding ditetapkan semula kepada 0px. Ini memastikan bar navigasi tidak bertindih kandungan pada skrin yang lebih kecil.

Penyelesaian ini menyediakan peralihan yang lancar antara bar navigasi tetap pada skrin besar dan bar navigasi tidak tetap pada skrin yang lebih kecil, mengelakkan sebarang isu pertindihan kandungan.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Pertindihan Navbar pada Kandungan Halaman dalam Reka Letak Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!