bootstrap 3 navbar-right 无填充与 navbar-fixed-top答案

【问题标题】：bootstrap 3 navbar-right no padding with navbar-fixed-topbootstrap 3 navbar-right 无填充与 navbar-fixed-top
【发布时间】：2013-12-27 06:50:25
【问题描述】：

我正在尝试使用左对齐和右对齐的引导导航栏。

这是我在右侧部分的代码：

<ul class="nav navbar-nav navbar-right">      
  <p class="navbar-text">Logged in as Some Person</p>
  <li>
    <a href="/log_out">Log out</a>
  </li>
</ul>

这是在.navbar > .navbar-collapse 内。这在大多数情况下都有效，只是右侧的填充不受尊重。

我在chrome和firefox上测试过，在这两种情况下，inspector的box模型在右边都显示了15px的padding，但是当页面实际渲染的时候，box的内容和上面的滚动条之间是没有空格的页面右侧。

这是一个演示问题的 jsfiddle：http://jsfiddle.net/YQKZ3/。

编辑：看来问题只发生在nav 元素具有类navbar-fixed-top 时。是什么导致包含该类（这是必需的）来搞砸右对齐事物的填充？

【问题讨论】：

通过更多研究，我可以看到 jsfiddle 在导航元素上没有 navbar-fixed-top 类的情况下工作。将相应地更新问题。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

http://jsfiddle.net/jmJWr/

在 .navbar 内需要一个 .container，然后调整 css。

.navbar > .container {width:auto;}

几天后 3.1.0 会出来，然后你可以使用 .container-fluid 并删除那个 css。

文档有误，这里是repo中的线程：https://github.com/twbs/bootstrap/issues/11783

【讨论】：

为什么有必要这样做？
这是必要的，因为它添加了 15px 的内边距，因此项目不会碰到边缘，这是导航栏所有实现的一部分，其中总是有一个 .container。
我的代码基于getbootstrap.com/components/#navbar 的导航栏示例，它似乎在任何地方都没有 .container。
是的。有一个更新，他们的文档在这方面是错误的。他们在文档中的容器内使用导航栏，但在所有用作主要内容上方导航栏的导航栏的实现中，导航栏中有一个 .container，很快您就可以使用 .container-fluid，文档应该很快更新.
这里是他们确认文档错误的地方：github.com/twbs/bootstrap/issues/11783