Ich versuche, die Höhe der Bootstrap 3.0-Navigationsleiste zu verringern, die bei festem Top-Verhalten verwendet wird. Hier verwende ich Code.
HTML
<div class="tnav">
<div class="navbar navbar-fixed-top" role="banner">
<div class="navbar-inner-sm">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav pull-right">
<li class="active">
<a href="../getting-started">Getting started</a>
</li>
<li>
<a href="../css">Ext01</a>
</li>
<li>
<a href="../components">Language</a>
</li>
<li>
<a href="../javascript">My Account</a>
</li>
<li>
<a href="../customize">Sign Out</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
CSS
.tnav .navbar { background:#F06; height:30px; }
.navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);}
.navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;}
.navbar-inner-sm .nav.pull-right {float: right;}
.navbar-inner-sm .nav > li {display: block;float: left;}
.navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;}
.navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;}
.navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;}
.navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;}
Ergebnis
Auf dem angezeigten Bildschirm wurde die Ausgabe der Navigationsleiste verringert, die Höhe jedoch nicht. Die ursprüngliche Höhe ist in rosa Farbe dargestellt.
Das obige CSS-Skript funktioniert in Bootstrap 2 fast gut. *
Gibt es eine Möglichkeit, die Höhe richtig zu verringern?
twitter-bootstrap
navbar
twitter-bootstrap-3
irfanmcsd
quelle
quelle
Antworten:
Nachdem ich einige Stunden verbracht hatte, wurde mein Problem durch Hinzufügen der folgenden CSS-Klasse behoben.
Arbeiten Sie mit Bootstrap 3.0. *
Arbeiten Sie mit Bootstrap 3.3.4
Aktualisieren Sie den vollständigen Code, um die Höhe der Navigationsleiste mit einem Screenshot anzupassen und zu verringern.
CSS:
Verwendungscode:
quelle
Arbeitslösung:
Bootstrap 3.0 hat standardmäßig eine 15px-Polsterung oben und unten, daher müssen wir es nur überschreiben!
Beispielsweise:
quelle
.navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}
standardmäßig.Überschreiben Sie einfach die in .navbar festgelegte Mindesthöhe wie folgt:
Das Ändern der Höhe eines Elements auf etwas, das kleiner als die Mindesthöhe ist, macht keinen Unterschied ...
quelle
Wenn Sie weniger Quelle verwenden, sollte die
variables.less
Datei eine Variable für die Navigationsleistenhöhe enthalten. Wenn Sie die Quelle nicht verwenden, können Sie sie mithilfe des auf der Bootstrap-Site bereitgestellten Dienstprogramms zum Anpassen anpassen. Und dann können Sie es herunterladen und in Ihr Projekt aufnehmen. Die gesuchte Variable ist:@navbar-height
quelle
Das ist meine Erfahrung
quelle
.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
Wenn Sie Ihre Stylesheets mit LESS / SASS generieren und dort Bootstrap importieren, können Sie beim Überschreiben der Variablen @ navbar-height die Höhe der Navigationsleiste festlegen, die ursprünglich in der Datei variables.less definiert wurde.
quelle
Wollte meine 2 Pence und ein Dankeschön an James Poulose für seine ursprüngliche Antwort hinzufügen, es war die einzige, die für mein spezielles Projekt funktionierte (MVC 5 mit der neuesten Version von Bootstrap 3).
Dies richtet sich hauptsächlich an Anfänger, um Klarheit zu schaffen und zukünftige Änderungen zu vereinfachen. Ich schlage vor, dass Sie einen Abschnitt am Ende Ihrer CSS-Datei für Ihr Projekt hinzufügen. Ich möchte dies beispielsweise tun:
Als ich James Pouloses Antwort oben nahm, tat ich Folgendes:
Ich habe die Auffüllwerte geändert, um den Text auf meinem Navigationsleistenelement nach unten zu drücken. Sie können jedes Bootstrap-Element wie dieses so ziemlich überschreiben, und es ist eine gute Möglichkeit, Änderungen vorzunehmen, ohne die Boostrap-Basisklassen zu vermasseln, da Sie als letztes dort Änderungen vornehmen und diese dann verlieren möchten, wenn Sie Bootstrap aktualisiert haben!
Schließlich möchte ich für noch mehr Trennung meine CSS-Dateien aufteilen und @ import-Deklarationen verwenden, um Ihre Unterdateien zur einfachen Verwaltung in eine Haupt-CSS-Datei zu importieren, zum Beispiel:
Hinweis : Wenn Sie mehrere Dateien abrufen, müssen Sie sicherstellen, dass sie in der richtigen Reihenfolge geladen werden.
Hoffe das hilft jemandem.
quelle
Ich denke, wir können diese weniger Stile schreiben, ohne die vorhandene Farbe zu ändern. Folgendes hat bei mir funktioniert (in Bootstrap 3.2.0)
Die letzte ('navbar-brand') wird tatsächlich nur benötigt, wenn Sie Text als 'Markennamen' haben.
quelle
Ich habe das gleiche Problem, die Höhe meiner von Bootstrap bereitgestellten Menüleiste war zu groß. Eigentlich habe ich einen falschen Bootstrap heruntergeladen und ihn schließlich durch Herunterladen des ursprünglichen Bootstraps von dieser Site entfernt. Http://getbootstrap.com/2.3 .2 / Ich möchte Bootstrap in yii (Netbeans) verwenden. Folgen Sie diesem Tutorial, https://www.youtube.com/watch?v=XH_qG8gphaw ... Die Stimme ist nicht vorhanden, aber die Schritte sind langsam, die Sie leicht verstehen und implementieren können Sie. Vielen Dank
quelle