Wie strecken Sie Elemente einer Bootstrap-Navigationsleiste, um die gesamte Breite zu nutzen?

Betrachten Sie die folgende Bootstrap Navigationsleiste:Wie strecken Sie Elemente einer Bootstrap-Navigationsleiste, um die gesamte Breite zu nutzen?

My custom Bootstrap navigation bar

Einige Fakten über diese Navigationsleiste:

Die Bar selbst ist genau 620px breit (Seite Breite)
Die Bar anspricht (Einbruchspunkt bei 640px)
Die Elemente des Balkens bleiben zusammen (kein Abstand dazwischen)
Die Leiste hat mehrsprachige Unterstützung (die Breiten der Elemente ändern sich)

Wie kann ich die Elemente der Leiste dehnen, um die gesamte Breite zu nutzen? Der verbleibende leere Bereich auf der rechten Seite sollte unter den Elementen des Balkens verteilt werden. Da jedes Element eine andere Breite hat und diese Breite sich von Sprache zu Sprache ändern kann, kann ich nicht mit Prozentsätzen arbeiten. Ich denke, dass die einzige Lösung JavaScript sein wird. Aber ich kann kein Beispiel finden ...

Js Fiddle Demo: http://jsfiddle.net/zBM6D/3/

<body> 
    <div id="page"> 
     <header id="header"> 
      <nav class="navbar navbar-default roboto normal" role="navigation"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-elements"> <span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 

         </button> 
        </div> 
        <div class="collapse navbar-collapse" id="navigation-elements"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">START</a> 
          </li> 
          <li><a href="#">THESE</a> 
          </li> 
          <li><a href="#">ARE</a> 
          </li> 
          <li><a href="#">SOME</a> 
          </li> 
          <li><a href="#">ELEMENTS</a> 
          </li> 
          <li><a href="#">WITH</a> 
          </li> 
          <li><a href="#">DIFFERENT</a> 
          </li> 
          <li><a href="#">WIDTHS</a> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
      <div class="clear"></div> 
     </header> 
    </div> 
</body>

Quelle

2014-03-07 urg0tt

Gut Ihren Code zu erhalten in http://jsfiddle.net – ram

Hier ist : [KLICKT MICH] (http://jsfiddle.net/zBM6D/3/). Natürlich habe ich den Code auf die Navigationsleiste reduziert. – urg0tt

Sie CSS Tabelle Anzeigelayout verwenden könnte Ihre nav Elemente zu verteilen. Seine well supported across browsers und einfach zu implementieren:

.navbar-nav { 
    display:table; 
    width:100%; 
    margin: 0; 
} 
.navbar-nav > li { 
    float:none; 
    display:table-cell; 
    text-align:center; 
}

Dies macht es zu 100% der Breite des übergeordneten #header, der wiederum durch die Breite des #page beschränkt, so dass, wenn Sie es brauchen 100% des gesamten Dokuments zu überspannen Breite müssen Sie es aus #page verschieben oder #page breiter machen.

http://jsfiddle.net/zBM6D/5/

Quelle

2014-03-07 11:52:03 Moob

Vielen Dank! :-) Genau das will ich! Aber du hast etwas in deiner Erklärung verpasst: In dem Code hast du "float: left;" "schweben: keine;" Alles andere habe ich bisher schon ausprobiert, aber dieses Ding hat bei meinen Versuchen gefehlt. Ich hatte fast alle Hoffnung aufgegeben. Vielen Dank! – urg0tt

Danke, das hat mir geholfen. – mpak

Basierend auf @ Moob Antwort, habe ich einen Kern, der das gut tun sollten:

https://gist.github.com/lukaszbachman/48774b74b6c4e9d0f4cb#file-navigation-stretch-css

Quelle

2014-09-18 06:13:52

Wie strecken Sie Elemente einer Bootstrap-Navigationsleiste, um die gesamte Breite zu nutzen?

Antwort

Verwandte Themen