Bagaimana untuk Memperbaiki Kandungan Laman Web Penyekat Navbar dalam Bootstrap Twitter?

Kandungan Tapak Web Menyekat Navbar

Isu ini timbul apabila menggunakan navbar tetap teratas Twitter Bootstrap. Pada mulanya, pengguna mungkin melihat kandungan dihalang oleh bar navigasi apabila melihat bahagian atas halaman. Untuk membetulkan isu ini dan menghalang kandungan daripada disekat, penyelesaian berikut boleh dilaksanakan:

Seperti yang dicadangkan dalam respons, hanya menambah padding untuk menolak kandungan ke bawah tidak mencukupi untuk rangka kerja Bootstrap responsif. Apabila mengubah saiz tetingkap penyemak imbas, jurang boleh muncul di antara bahagian atas halaman dan bar navigasi.

Oleh itu, pendekatan yang lebih komprehensif disyorkan:

body {
  padding-top: 60px;
}

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

Kod CSS ini menambah padding atas 60px ke badan, dengan berkesan menolak kandungan utama ke bawah bar navigasi. Walau bagaimanapun, untuk saiz skrin mudah alih atau lebih kecil (lebar skrin kurang daripada 979px), pelapik atas dialih keluar untuk mengelakkan isu bertindih.

Dengan melaksanakan penyelesaian ini, pengguna boleh memastikan bar nav kekal di bahagian atas halaman tetapi tidak lagi mengganggu pengalaman tontonan kandungan berdekatan.

Atas ialah kandungan terperinci Bagaimana untuk Memperbaiki Kandungan Laman Web Penyekat Navbar dalam Bootstrap Twitter?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!