Twitter Bootstrap - 全宽导航栏答案

【问题标题】：Twitter Bootstrap - full width navbarTwitter Bootstrap - 全宽导航栏
【发布时间】：2012-10-16 15:53:34
【问题描述】：

按照 TB 的例子，我有一个导航栏，标记如下：

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
                   <!-- nav bar items here -->
        </div>
    </div>
</div>

我希望它跨越屏幕的整个宽度，并且没有任何圆角——类似于导航栏的静态顶部样式。

我似乎无法在 TB 中找到如何做到这一点。如果没有办法，我需要什么 CSS 来覆盖 TB 而不破坏响应能力？

【问题讨论】：

我昨晚深夜意识到我为您提供的解决方案中有一个错误的错字。现在已在my answer below 中修复。

标签： css twitter-bootstrap navbar

【解决方案1】：

只需像这样将类容器更改为 container-fullwidth ：

<div class="container-fullwidth">

【讨论】：

这不是引导类吗？

【解决方案2】：

不确定navbar-static-top 类在 2.2.2 版之前是否可用，但我认为您可以通过以下方式实现您的目标：

<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>
        </ul>
    </div>
</div>
<div class="container">
    ...
</div>

我整理了一个jsFiddle as an example。

【讨论】：

【解决方案3】：

将导航栏从容器中取出：

<div class="navbar">
    <div class="navbar-inner">
               <!-- nav bar items here -->
     </div>
</div>
<div class="container">

</div>

编辑：

这是我使用响应式导航栏所做的。代码适合文档正文：

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <div class="container">

          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </a>

          <!-- Be sure to leave the brand out there if you want it shown -->
          <a class="brand" href="#">Project name</a>


          <!-- Everything you want hidden at 940px or less, place within here -->
          <div class="nav-collapse">
          <!-- .nav, .navbar-search, .navbar-form, etc -->
          <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
            </ul>
          <ul class="nav pull-right">
            <li><a href="#">Log out</a></li>
          </ul>
          </div>

          </div>
        </div>

    </div>
  <div class="container">
    <div class="row">
      <div class="span12">

      </div>
    </div>


  </div> <!-- end container -->
  <script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>

【讨论】：

它不能很好地工作：1.）仍然有圆角，2.）当我调整浏览器大小时出现水平滚动条，3.）在小屏幕宽度下，它不再跨越整个浏览器的宽度。
用我使用的一些 sn-p 更新了我的答案。您是否包含响应式 CSS 和视口元标记？文档展示了如何实现响应式导航栏twitter.github.com/bootstrap/components.html#navs
对不起 - 我想我的意思是“流畅”，没有反应。我实际上不希望它变成带有右侧按钮的 UI。我将使用不同于默认 TB 外观的样式。如何摆脱圆角？为什么会出现水平滚动条？为什么它在小屏幕上不跨越全宽？
你希望导航栏是怎样的？链接到以下几行？
我只关心导航栏的容器。我希望它总是跨越屏幕的宽度。

【解决方案4】：

我参加聚会很晚了，但这个答案在 Google 搜索结果中排名靠前。

Bootstrap 3 对此有内置的答案，将导航栏中的容器 div 设置为 container-fluid，它将下降到屏幕宽度。

像这样：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">More Stuff</a></li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

【解决方案5】：

将您的<nav>元素从<div class='container-fluid'>中取出。例如：-

<nav>
 ......nav content goes here
<nav>

<div class="container-fluid">
  <div>
   ........ other content goes here
  </div>
</div>

【讨论】：

【解决方案6】：

您需要将容器向下推到导航栏。

请在这里找到我的工作小提琴http://jsfiddle.net/meetravi/aXCMW/1/

<header>

    <h2 class="title">Test</h2>
</header>
<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>

        </ul>
    </div>
</div>
<div class="container">

</div>

【讨论】：

对 rrikesh 的相同评论：它不能很好地工作：1.) 仍然有圆角，2.) 当我调整浏览器大小时出现水平滚动条，3.) 在小屏幕宽度下，它不再跨越浏览器的整个宽度。
试试这个小提琴这可能会解决你的问题。 jsfiddle.net/meetravi/aXCMW/2 1. 边界半径问题现已解决 2. 尝试溢出：隐藏 3. 我不确定我的解决方案是否能解决。所以让我知道结果。对于较小的引导程序调整，我使用 !important 来覆盖它。我不确定是否有更好的方法来覆盖它。
#3 未解决。您可以在 jsFiddle 中看到它。在 TB 中是否没有“本地”方法可以做到这一点？
#3 问题现已解决。请参阅更新的小提琴jsfiddle.net/meetravi/aXCMW/4。如果它解决了您的问题，请接受我的回答，如果对您有任何帮助，请 +1。

【解决方案7】：

只需将<div class="container">替换为<div class="container-fluid">即可，即两边没有边距的容器。

我认为这是最好的解决方案，因为它避免了一些无用的覆盖并利用了内置类，它很干净。

【讨论】：

这并不能解决问题。它确实进一步扩展但不完全。

【解决方案8】：

你可以覆盖一些 css

body {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.navbar-inner {
    border-radius: 0px !important;
}

!important 是必需的，以防您在自定义 css 之后链接 bootstrap.css。

并从.container 中添加您的导航html

【讨论】：

body 样式会影响网站的其他部分，对吗？我真的只想影响导航栏。我已经喜欢其他所有内容的填充/边距了。
是的，但你可以设法做到这一点.. 其他一切都应该是div.container，对吧？因此，您可以应用您在 div.containe 中覆盖的 body 样式，例如：.container { padding-left: 10px !important; padding-right: 10px !important; }

【解决方案9】：

要删除角上的边框半径，请将此样式添加到您的 custom.css 文件中

    .navbar-inner{
       -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
    }

【讨论】：

【解决方案10】：

我知道我参加聚会有点晚了，但我通过调整 CSS 使宽度跨度为 100% 并将 l/r 边距设置为 0px 解决了这个问题；

#div_id
{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

【讨论】：

【解决方案11】：

您必须将 col-md-12 添加到您的内部导航栏。 md 用于桌面。您可以从引导程序的选项列表中选择其他选项。 col-md-12 中的 12 用于全角。如果你想要半角，你可以使用 6 而不是 12 。例如col-md-6.

这是您问题的解决方案

    <div class="container">
       <div class="navbar">
          <div class="navbar-inner col-md-12">
               <!-- nav bar items here -->
          </div>
       </div>
   </div>

【讨论】：