Bagaimanakah Saya Boleh Menghalang Navbar daripada Mengaburkan Kandungan Halaman dalam Bootstrap?

Kandungan Halaman Mengaburkan Navbar: Penyelesaian

Bar navigasi atas Bootstrap (

) ialah cara mudah untuk menyediakan pilihan navigasi di bahagian atas halaman. Walau bagaimanapun, dalam senario tertentu, ia boleh menyekat kandungan penting yang terletak berhampiran bahagian atas halaman.

Untuk menangani isu ini, pertimbangkan untuk melaksanakan strategi pelapik:

body {
  padding-top: 60px;
}

Pelapik ini akan mengalihkan kandungan ke bawah, membolehkan bar navigasi terapung di atas tanpa mengaburi sebarang kandungan. Walau bagaimanapun, pendekatan ini mungkin mewujudkan jurang di bahagian atas halaman apabila dilihat pada skrin yang lebih kecil.

Untuk mengelakkan ini, gunakan pertanyaan media untuk melaraskan padding berdasarkan lebar skrin:

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

Ini memastikan bahawa pada skrin yang lebih sempit, padding ditanggalkan, menghapuskan sebarang jarak yang tidak diingini. Dengan melaksanakan penyelesaian ini, anda boleh mengekalkan bar navigasi berfungsi sambil memastikan paparan kandungan halaman penting yang lancar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Navbar daripada Mengaburkan Kandungan Halaman dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!