Die Standardhöhe von Navbar in Twitter-Bootstrap ist zu klein. Wenn die Höhe erhöht wird, greift sie in die darunter liegenden Divs ein. Wie kann ich die Höhe der Navigationsleiste erhöhen, die die gesamte Seite nach unten bewegt? Wenn dies möglich ist, platzieren Sie Navbar-Links oben/unten in der Navigationsleiste.Twitter-Bootstrap navbar Höhe zu klein
Antwort
Ich bin mir ziemlich sicher, dass ich diese Lösung nicht liebe, aber es funktioniert für die Zeit, die ich dafür ausgeben muss.
.navbar .container { height: 2em; }
Ich hatte auch einige padding-top in dem gleichen Selektor hinzuzufügen Dinge in der Navigationsleiste zu bekommen vertikal schön auszurichten.
edit: Ich habe gerade Ihre Frage erneut gelesen und sah, dass Sie Probleme mit den "Divs unten" haben. Dazu müssen Sie auch das Padding auf dem Body-Tag anpassen, z.
body { padding-top: 6em; }
pro der Twitter Bootstrap docs on Navbar:
Wenn Sie die Navigationsleiste anbringen, denken Sie daran darunter für den verdeckten Bereich Rechnung zu tragen. Fügen Sie dem < Körper > 40px oder mehr von apdding hinzu. Achten Sie darauf, dieses nach dem Kern Bootstrap CSS und vor dem optionalen reagierenden CSS hinzuzufügen.
Dies ist auch eine praktikable Lösung. Danke @Chris. – Gattoo
eine Polsterung wie das Hinzufügen ist nicht genug, wenn Sie ansprechbar Bootstrap verwenden sind. Wenn Sie in diesem Fall die Größe Ihres Fensters ändern, erhalten Sie eine Lücke zwischen dem oberen Rand der Seite und der Navigationsleiste. Eine richtige Lösung sieht wie folgt aus:
body {
padding-top: 60px;
}
@media (max-width: 979px) {
body {
padding-top: 0px;
}
}
Quelle: Twitter Bootstrap - top nav bar blocking top content of the page
Sie versuchen diese kann. es funktioniert in jeder Größe der Anzeige.
.navbar .container { min-height: 83px; }
.navbar-fixed-top {
position:static;
margin-bottom:20px;
}
</script>
$(".dropdown-toggle").click(function() {
$(".nav-collapse").css('height', 'auto')
});
</script>
Dies löste ein ähnliches Problem von mir, (Die Untermenüs nicht wegen der kleinen Mutter ul Höhe wurde erscheint, auf dem ersten Klick) vielleicht ist es auch für Sie funktioniert.
- 1. Bootstrap 100% Höhe mit navbar
- 2. Bootstrap: Fill ganzen Container unter Navbar minus Navbar Höhe
- 3. Twitter bootstrap Formularfelder zu klein
- 4. Twitter Bootstrap navbar-fixed-bottom benutzerdefinierte Höhe
- 5. Bootstrap 4 Änderung navbar Höhe navbar Elemente verursacht nicht vertikal zu
- 6. KryoException: Puffer zu klein
- 7. Lollipop Benachrichtigungssymbol zu klein
- 8. Dia Exportauflösung zu klein
- 9. Firefox Scrollbar nicht angezeigt, wenn div Höhe klein ist
- 10. Android-Browser-Einstellung Element Größe zu klein
- 11. MPart Symbolleiste zu klein für Text Toolcontrol
- 12. ios9 UIAlertController UITextField zu klein
- 13. Flexbox navbar, Stretch Links zu gleichen Höhen
- 14. wxHaskell: Das Fenster erscheint zu klein
- 15. Wie app.js Datei klein zu halten
- 16. Sprite.Draw() zeichnet meine Texturen zu klein
- 17. Bootstrap Schrift Skalierung zu klein auf Handy
- 18. sprintf_s mit einem Puffer zu klein
- 19. tvOS-Video: Titelmetadaten abgeschnitten, Grafikgröße zu klein
- 20. Standard-Marker in Google Maps zu klein
- 21. rotate_sprite Rotation ist ~ 65625 mal zu klein
- 22. RGeo Projected Buffer Polygon zu klein
- 23. Git-Fehler: "Index-Datei ist zu klein"
- 24. Nginx Cache-Datei ist zu klein
- 25. Golang JSON Struktur zu Klein funktioniert nicht
- 26. Warum ist meine Bootstrap feste Top Navbar so klein auf Handy?
- 27. Fehler beim Kompilieren: twitterBootstrap ist kein Mitglied von Paket views.html.helper
- 28. Navbar Menüelemente vertikal zentriert
- 29. Graphstream klein innerhalb Jframe
- 30. UIImage klein + mittel + groß wie Apple Mail
gelöst. Höhe geändert in .navbar .nav hinzugefügt padding-top und gab einen Wert – Gattoo
veröffentlichen Sie Ihre Ergebnisse als Antwort und genehmigen Sie es durch das Häkchen das grüne Häkchen, um diese Frage zu schließen, so wird es anderen Benutzern in der Zukunft helfen. –
Danke dir. Ich würde jemanden anderen lieben, vielleicht du, tu es. – Gattoo