Gunakan kelas atau kedudukan tetap: melekit untuk membolehkan bar navigasi untuk menetapkan bahagian atas. Bootstrap menyediakan kelas tetap tetap, yang boleh diperbaiki dengan menambah terus ke navbar, tetapi anda perlu menambah padding ke badan untuk mengelakkan kandungan yang disekat; Jika anda memerlukan kawalan yang lebih fleksibel, anda boleh menetapkan kedudukan: melekit, nilai atas dan indeks z oleh CSS adat; Di samping itu, anda perlu ambil perhatian bahawa bekas induk tidak boleh melimpah: Tersembunyi, nilai teratas mesti ditetapkan, dan z-indeks disyorkan; Masalah biasa termasuk overlay gaya, tumpang tindih elemen, dan pengenalan fail CSS yang salah. Adalah disyorkan untuk menggunakan alat pemaju untuk menyelesaikan masalah gaya dan mengelakkan konflik penamaan.

Kadang -kadang kita mahu bar navigasi sentiasa diperbaiki di bahagian atas apabila halaman sedang menatal, supaya pengguna boleh mengklik pada menu pada bila -bila masa tanpa perlu menatal ke belakang. Bootstrap sendiri telah menyediakan kelas siap sedia untuk melaksanakan fungsi ini, yang boleh dilakukan dengan hanya menggunakannya dengan betul.

Pelaksanaan cepat menggunakan kelas fixed-top

Bootstrap menyediakan kelas yang sangat mudah: fixed-top , yang boleh diperbaiki di bahagian atas dengan menambahkannya terus ke Navbar.

 <nav class = "navbar navbar-expand-lg navbar-light bg-light fixed-light">
  <!-kandungan navigasi->
</nav>

Selepas melakukan ini, bar navigasi kekal di bahagian atas tidak kira bagaimana anda menatal halaman. Tetapi perlu diperhatikan bahawa sejak bar navigasi dipisahkan dari aliran dokumen, kandungan di bawah ia mungkin dikaburkan. Penyelesaiannya adalah untuk menambah padding-top ke body atau kawasan kandungan utama, dan nilainya kira-kira sama dengan ketinggian bar navigasi (biasanya 56px):

 badan {
  Padding-top: 56px;
}

Dengan cara ini kandungan halaman tidak akan disekat.

Gaya atau tingkah laku tersuai

Jika anda tidak mahu menggunakan gaya lalai bootstrap, atau ingin mengawal kedudukan melekit lebih fleksibel, anda juga boleh menulis CSS sendiri menggunakan position: sticky :

 .my-sticky-nav {
  Kedudukan: melekit;
  Atas: 0;
  Z-indeks: 1020;
  latar belakang warna: putih; /* Elakkan latar belakang telus yang mempengaruhi paparan*/
}

Kemudian tambahkan nama kelas ke Navbar anda:

 <nav class = "navbar navbar-expand-lg navbar-light bg-light my-sticky-nav">
  <!-kandungan navigasi->
</nav>

Kelebihan kaedah ini ialah ia dapat mengawal kedudukan dan keadaan "keletihan" dengan lebih berhati -hati, seperti berkuatkuasa hanya dalam skop bekas tertentu.

Tetapi beberapa perkara yang perlu diperhatikan:

• Unsur induk tidak dapat overflow: hidden , jika tidak melekit tidak akan berkuatkuasa
• Nilai top mesti ditetapkan, jika tidak, ia tidak akan berfungsi
• Disyorkan untuk menetapkan z-index untuk memastikan tahapnya cukup tinggi

Nota dan Soalan Lazim

Kadang-kadang anda akan mendapati bahawa bar navigasi hilang selepas menetapkan fixed-top , atau gaya tidak konsisten, yang mungkin disebabkan oleh sebab-sebab berikut:

• Struktur halaman tidak diproses dengan baik, seperti pelbagai elemen kedudukan tetap bertindih
• Padding badan tidak ditetapkan, menyebabkan kandungan disekat
• Gaya tersuai digunakan untuk mengatasi gaya lalai bootstrap

Amalan yang dicadangkan:

• Pertama sahkan sama ada fail CSS bootstrap yang betul telah diperkenalkan
• Periksa sama ada unsur -unsur dalam alat pemaju penyemak imbas mempunyai gaya yang diharapkan
• Sekiranya anda menggunakan gaya anda sendiri, perhatikan isu konflik menamakan

Pada dasarnya ini adalah kaedah. Menggunakan fixed-top adalah cara terpantas. Jika anda memerlukan lebih banyak kawalan, anda boleh menggunakan position: sticky untuk menulis gaya sendiri. Kedua -duanya tidak rumit, tetapi butirannya mudah diabaikan, terutamanya isu susun atur dan perintah cascade.

Atas ialah kandungan terperinci Bagaimana membuat bootstrap navbar melekit di atas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!