问题 bootstrap 3 navbar-right没有使用navbar-fixed-top填充


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

这是我右边部分的代码:

<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上进行了测试,在这两种情况下,检查员的盒子模型在右边显示了15px的填充,但是当页面实际渲染时,盒子的内容和右边的滚动条之间没有空格。页。

这是一个证明问题的方法: http://jsfiddle.net/YQKZ3/

编辑:似乎问题只发生在 nav 元素有类 navbar-fixed-top。是什么原因导致包含该类(需要)来填充右对齐的东西上的填充?


4620
2017-12-26 19:06


起源

通过更多的研究,我可以看到jsfiddle的工作没有 navbar-fixed-top nav元素上的类。将相应地更新问题。 - cg505


答案:


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


14
2017-12-26 19:46



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