masyarakat

Belajar

Perpustakaan Alatan

Alat AI

Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial css > 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 Arquette

Lepaskan： 2024-11-21 04:00:12

asal

587 orang telah melayarinya

How to Prevent Fixed Navbars from Obscuring Page Content in Responsive Bootstrap Designs?

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Salin selepas log masuk

Sambil menambahkan pelapik ringkas pada halaman boleh kelihatan seperti penyelesaian:

body {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">padding-top: 60px;

Salin selepas log masuk

}

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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">padding-top: 60px;

Salin selepas log masuk

}
@media (lebar maksimum: 979px) {

body {
    padding-top: 0px;
}

Salin selepas log masuk

}

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!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Memastikan DIV Tetap di Tempat Semasa Menatal? Artikel seterusnya：Bolehkah CSS Memilih Elemen Berdasarkan Elemen Anak Mereka?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2398

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2527

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2142

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...