volle Breite Navigationsleiste mit bootstrap

Muss ich boorstrap full width navbar im 940px container und nach header wie dieses Bild. Wie ?

volle Breite Navigationsleiste mit bootstrap

Code in jsfiddle

  • Was ist dein code Aussehen bis zu diesem Punkt?
  • Container ist das, was schränkt Ihre Navigationsleiste auf 960px.
  • Code in jsfiddle.net/4w6PY
  • Gotcha-linke eine Antwort unten mit der richtigen bootstrap-Klassen und styling.
  • wie um zu zeigen, navbar-text in center(940px) container?!
  • aktualisiert meine Antwort zu reflektieren.

InformationsquelleAutor B.B King | 2013-08-30
  1. 4

    Dies ist, wie Sie es tun würde, in einer "bootstrappy" Weg...

    /* put the stuff you want NOT to span 100% in a container */
<div class="container">
  /* wrap the grouping in a row */
  <div class="row">
    /* left center and right classes are unneeded.*/
    /* Just used to show color in the fiddle */
    <div class="span3 left">Header Left</div>
    <div class="span6 center">Header Center</div>
    <div class="span3 right">Header Right</div>
  </div>
</div>

/* navbar outside the container will span 100% */
<div class="navbar">
  <div class="container">
    <div class="navbar-inner">
      <div class="span12">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

/* back into a container so it doesn't span the full width */
<div class="container">
  <div class="row">
    <div class="span12 content">Content</div>
  </div>
</div>

    DEMO

    EDIT: Aktualisiert, um die Anforderungen der navlinks in container.

    InformationsquelleAutor brbcoding
  2. 1

    Benötigen Sie einen container, halten Sie die header und den Inhalt.
    Zum Beispiel:

    <div class="container">
    <div id="headerleft"></div>
    <div id="header"></div>
    <div id="headerright"></div>
</div>
<div id="nav"></div>
<div class="container">
    <div id="content"></div>
</div>

    Und die CSS würde ähnlich sein:

    .container { width: 75%; }
#nav { width: 100%; }
    InformationsquelleAutor Lewes
Schreibe einen Kommentar