Rumah > Artikel > hujung hadapan web > Bagaimana untuk Menghalang Navbar Tetap daripada Mengaburkan Kandungan Halaman dalam Reka Bentuk Bootstrap Responsif?
Bagaimana untuk Menghalang Navbar Tetap daripada Mengaburkan Kandungan Halaman dalam Reka Bentuk Bootstrap Responsif?
- Patricia Arquetteasal
- 2024-11-21 04:00:12538semak imbas
Menyelesaikan Halangan Kandungan oleh Navbar pada Halaman Mula
Apabila menggunakan Twitter Bootstrap navbar tetap, adalah perkara biasa untuk menghadapi masalah di mana navbar mengaburkan kandungan halaman di bahagian atas. Artikel ini membentangkan penyelesaian untuk menyelesaikan isu ini.
<div class='navbar navbar-fixed-top'></p> <pre class="brush:php;toolbar:false"><div>
Sambil menambahkan pelapik ringkas pada halaman boleh kelihatan seperti penyelesaian:
body {</p><pre class="brush:php;toolbar:false">padding-top: 60px;}
Pendekatan ini cacat untuk reka bentuk Bootstrap yang responsif. Apabila mengubah saiz port pandangan, jurang akan muncul antara bahagian atas halaman dan bar navigasi.
Penyelesaian yang betul melibatkan penggunaan pertanyaan media untuk melaraskan padding halaman berdasarkan lebar skrin:
badan {</p><pre class="brush:php;toolbar:false">padding-top: 60px;}
@media (lebar maksimum: 979px) {
body {
padding-top: 0px;
}}
Ini pengubahsuaian memastikan kandungan halaman kekal tidak dihalang oleh bar navigasi sambil mengekalkan reka bentuk yang konsisten merentas saiz skrin yang berbeza.
Atas ialah kandungan terperinci Bagaimana untuk Menghalang Navbar Tetap daripada Mengaburkan Kandungan Halaman dalam Reka Bentuk Bootstrap Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!