Bei Verwendung der festen Twitter Bootstrap-Navigationsleiste tritt häufig ein Problem auf, bei dem die Navigationsleiste den Seiteninhalt oben verdeckt. In diesem Artikel wird eine Lösung zur Behebung dieses Problems vorgestellt.
<div class='navbar navbar-fixed-top'></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
Während das Hinzufügen einer einfachen Polsterung zur Seite wie ein Lösung:
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;}
Dieser Ansatz ist für responsive Bootstrap-Designs fehlerhaft. Beim Ändern der Größe des Ansichtsfensters würde eine Lücke zwischen dem Seitenanfang und der Navigationsleiste entstehen.
Die richtige Lösung besteht darin, Medienabfragen zu verwenden, um den Seitenabstand basierend auf der Bildschirmbreite anzupassen:
Körper {</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;}
@media (max-width: 979px) {
body {
padding-top: 0px;
}}
Diese Änderung stellt sicher, dass der Seiteninhalt nicht durch die Navigationsleiste blockiert wird und gleichzeitig ein einheitliches Design über verschiedene Bildschirmgrößen hinweg erhalten bleibt.
Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass feste Navigationsleisten den Seiteninhalt in Responsive Bootstrap-Designs verdecken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
