2012-03-29 19 views
8

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

+0

gelöst. Höhe geändert in .navbar .nav hinzugefügt padding-top und gab einen Wert – Gattoo

+0

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. –

+0

Danke dir. Ich würde jemanden anderen lieben, vielleicht du, tu es. – Gattoo

Antwort

19

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.

+0

Dies ist auch eine praktikable Lösung. Danke @Chris. – Gattoo

6

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

1

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; 
    } 
0
</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.

Verwandte Themen