twitter bootstrap: Wie Spanne links in der navbar?
Habe ich versucht, ein paar option, aber ich kann nicht verwalten, um erhalten Sie 4 links erstrecken sich über die Navigationsleiste. Ich dachte, es wäre ganz einfach hinzufügen, die span3
Klasse zu jedem <li>
.
Hier ist mein HTML:
<div class="navbar center">
<div class="navbar-inner">
<div class="container row">
<ul class="nav span12">
<li class="active span3">
<a href="#">Home</a>
</li>
<li class="span3"><a href="#">Link</a></li>
<li class="span3"><a href="#">Link</a></li>
<li class="span3"><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
Mitte der links habe ich die Lösung hier beschrieben: Ändern Sie twitter bootstrap navbar
Hier die CSS:
.navbar-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
Alle ich habe es geschafft zu bekommen, ist dies:
Wie kann ich diese vier verbindungen überspannt auf der gleichen Zeile?
InformationsquelleAutor PEF | 2012-08-07
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit
spanX
ist nicht die beste Lösung (es sei denn, Sie sind mit bootstrap-resonsive.css, siehe unten). Sie können verwendet Prozentsätze, solange Sie bereit sind, ändern Sie CSS, wenn die Anzahl der Elemente in der Navigationsleiste ändert.Können Sie sich diese Arbeit machen mit default navbar-markup:
- Und zwei CSS-Regeln. Die erste entfernt den Rand der
<ul class="nav">
, hebt den Schwimmer und setzt die Breite auf 100% des Containers (in diesem Fall die<div class="container">
innerhalb<div class="navbar-inner">
.Die zweite Regel setzt die Breite der einzelnen
<li>
einen gewissen Prozentsatz von der Breite des<ul>
. Wenn Sie vier Artikel, dann legen Sie es auf25%
. Wenn Sie fünf ist, wäre es20%
, und so weiter.jsFiddle DEMO
UPDATE
Wenn Sie die responsive bootstrap-CSS verwenden, KÖNNEN Sie den eingebauten
spanX
Klassen, etwa so:Dann werden all die CSS, die Sie brauchen, ist:
jsFiddle DEMO
.row-fluid
ohne den interaktiven Teil.Du hast einen guten start, aber das markup spiegelt nicht die realen Netz :
.spanX
im.span12
.container
und.row
möglicherweise widersprüchliche EigenschaftenScheint es zu funktionieren mit diesem :
Demo (jsfiddle) und fullscreen