使用bootstrap的全宽导航栏

Question

我需要在full width navbar容器中引导940px并在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>

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