全幅導航欄使用引導

Question

我需要boorstrap full width navbar在940px容器和header像這樣的圖片。如何 ？

守則jsfiddle

Answer 1

這是你將如何做一個 「bootstrappy」 的方式...

/* 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

編輯：已更新以反映容器內的導航鏈接的要求。

Answer 2

你需要一個容器，保持頭部和內容。 例如：

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

而CSS將類似於此：

.container { width: 75%; } 
#nav { width: 100%; }