Ich habe diesen Twitter Bootstrap Code
<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</a>
<div class='nav-collapse'>
<ul class='nav'>
<li class='active'>
<a href='some_url'>My Home</a>
</li>
<li>
<a href='some_url'>Option 1 </a>
</li>
<li>
<a href='some_url'>Another option</a>
</li>
<li>
<a href='some_url'>Another option</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Wenn ich jedoch den Anfang der Seite ansehe, blockiert die Navigationsleiste einen Teil des Inhalts, der sich oben auf der Seite befindet. Haben Sie eine Idee, wie Sie den Rest des Inhalts nach unten drücken können, wenn der obere Rand der Seite angezeigt wird, damit der Inhalt nicht von der Navigationsleiste blockiert wird?
css
twitter-bootstrap
GeekedOut
quelle
quelle
Antworten:
Fügen Sie Ihrem CSS hinzu:
Aus den Bootstrap-Dokumenten :
quelle
Das Hinzufügen eines solchen Auffüllens reicht nicht aus, wenn Sie einen reaktionsschnellen Bootstrap verwenden. In diesem Fall wird beim Ändern der Fenstergröße eine Lücke zwischen dem Seitenanfang und der Navigationsleiste angezeigt. Eine richtige Lösung sieht so aus:
quelle
Bei Bootstrap 3 verhindert die Klasse dieses Problem,
navbar-static-top
anstattnavbar-fixed-top
, dass die Navigationsleiste immer sichtbar sein muss.quelle
Eine viel praktischere Lösung für Ihre Referenz, die in allen meinen Projekten perfekt funktioniert:
ändere dein erstes 'div' von
zu
quelle
Ich benutze jQuery, um dieses Problem zu lösen. Dies ist das Snippet für BS 3.0.0:
quelle
Ich habe gute Erfolge mit der Erstellung einer nicht fixierten Dummy-Navigationsleiste direkt vor meiner echten festen Navigationsleiste erzielt.
Der Abstand funktioniert bei allen Bildschirmgrößen hervorragend.
quelle
In meinem aus dem MVC 5-Tutorial abgeleiteten Projekt stellte ich fest, dass das Ändern der Körperpolsterung keine Auswirkungen hatte. Folgendes hat bei mir funktioniert:
Es löst die Fälle, in denen die Navigationsleiste in 2 oder 3 Zeilen gefaltet wird. Dies kann an einer beliebigen Stelle nach dem Zeilenkörper in bootstrap.css eingefügt werden {margin: 0; }}
quelle
Die Bootstrap v4- Startervorlage CSS verwendet:
quelle
Fügen Sie dies, wie in diesem Beispiel von Twitter zu sehen, vor der Zeile hinzu, die die Deklarationen der Antwortstile enthält:
Wie so:
quelle
Mit navbar navbar-default funktioniert alles einwandfrei. Wenn Sie jedoch navbar-fixed-top verwenden , müssen Sie einen benutzerdefinierten Stil body {padding-top: 60px;} einfügen, da sonst der Inhalt darunter blockiert wird.
quelle
Hier treten zwei Probleme auf:
Bootstrap 4 mit internen Seitenlinks
Um 1) zu beheben, verwendet die Bootstrap v4-Startervorlage CSS, wie Martijn Burger oben sagte:
Um dies zu beheben 2) Überprüfen Sie dieses Problem . Dieser Code funktioniert meistens (aber nicht beim zweiten Klick auf denselben Hash):
Dieser Code animiert A-Links mit jQuery (nicht schlankes jQuery):
quelle
Die beste Lösung, die ich bisher gefunden habe und die keine harten Codierungshöhen und Haltepunkte beinhaltet, besteht darin
<nav...
, dem Markup ein zusätzliches Tag hinzuzufügen .Auf diese Weise sind die
@media
Haltepunkte identisch, die Höhe ist identisch (vorausgesetzt, Sienavbar-brand
sind das höchste Objekt in der,navbar
aber Sie können problemlos ein anderes Element in der Nicht-fixed-top
Navigationsleiste ersetzen.Dies schlägt bei Bildschirmleseprogrammen fehl, die nun 2
navbar-brand
Elemente präsentieren. Dies weist auf die Notwendigkeit einernot-for-sr
Klasse hin, um zu verhindern, dass dieses Element für Bildschirmleser angezeigt wird. Diese Klasse existiert jedoch nicht https://getbootstrap.com/docs/4.0/utilities/screenreaders/Ich habe versucht, das Problem mit dem Bildschirmleser zu kompensieren,
aria-hidden="true"
aber https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ scheint darauf hinzudeuten, dass dies wahrscheinlich nicht funktioniert, wenn der Bildschirmleser aktiviert ist im Fokusmodus, der natürlich das einzige Mal ist, dass Sie ihn tatsächlich zum Arbeiten benötigen ...quelle
mit
percentage
ist eine viel bessere Lösung alspixels
.Bei Bedarf können Sie immer noch explizit sein, indem Sie verschiedene hinzufügen,
breakpoints
wie in einer anderen Antwort von erwähnt@spajus
quelle
BEARBEITEN: Diese Lösung ist für neuere Versionen von Bootstrap nicht geeignet, bei denen die Klassen navbar-inverse und navbar-static-top nicht verfügbar sind.
Mit MVC 5 habe ich meine behoben, indem ich einfach meine eigene Site.css hinzugefügt habe, die nach den anderen geladen wurde, mit der folgenden Zeile:
body{padding: 0}
und ich habe den Code am Anfang von _Layout.cshtml so geändert, dass er lautet:
quelle
navbar-static-top
ist in Bootstrap4 nicht definiert. Weder istnavbar-inverse
Wenn sich Ihre Navigationsleiste ursprünglich oben auf der Seite befindet, setzen Sie den Wert auf 0. Andernfalls legen Sie den Wert für fest
data-offset-top
auf den Wert des Inhalts über Ihrer Navigationsleiste.In der Zwischenzeit müssen Sie Folgendes ändern
css
:quelle
Füge das hinzu:
quelle
Sie sollten hinzufügen
eine klebrige Fußzeile oder etwas anderes nicht zerstören
quelle
Fügen Sie Ihrem JS hinzu:
quelle
Sie können den Rand basierend auf der Bildschirmauflösung einstellen
quelle