使用引导程序的全宽导航栏答案

【问题标题】：full width navbar using bootstrap使用引导程序的全宽导航栏
【发布时间】：2013-09-03 11:43:10
【问题描述】：

我需要在940px 容器中和header 之后像这张照片一样增加full width navbar。怎么做？

jsfiddle中的代码

【问题讨论】：

到目前为止，您的代码是什么样的？
容器将您的导航栏限制为 960 像素。
@brbcoding：jsfiddle.net/4w6PY中的代码
抓住了——在下面留下了正确的引导类和样式的答案。
@brbcoding: 如何在center(940px) 容器中显示导航栏文本？！

【解决方案1】：

您需要一个容器来保存标题和内容。例如：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

这成功了！但不显示导航栏标题和主页/链接...在中心。
是的，只是将内容包装在一个容器中（不是整个导航栏，只是内容）。
什么不起作用？它的工作方式与您的图片完全一样。 i.imgur.com/an62Zbj.png
是的，不知道是什么问题。
必须是特定于浏览器的问题。在 webkit 和 moz 中对我来说很好。这是处理它的方法，所以我不确定问题是什么。