html - 使用 Bootstrap 的全宽导航栏

Question

我需要在 940px 容器中和 header 之后 Bootstrap full width navbar 就像这张照片。如何？

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

编辑:已更新以反射(reflect)容器内导航链接的要求。