Bagaimanakah Saya Boleh Menghalang Navbar daripada Mengaburkan Kandungan Halaman dalam Bootstrap?-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-11-11 14:54:03

asal

978 orang telah melayarinya

How Can I Prevent the Navbar from Obscuring Page Content in 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;
}

Salin selepas log masuk

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;
  }
}

Salin selepas log masuk

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!