html - 使用引导程序的全宽导航栏

Question

我需要full width navbar在940px容器中进行boorstrap，然后header像这张照片一样。如何 ？

jsfiddle中的代码

Answer 1

这就是您将以“引导程序”的方式进行操作的方式...

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

演示

编辑：更新以反映容器内导航链接的要求。

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%; }