twitter-bootstrap bootstrap 3 导航栏右侧没有填充导航栏固定顶部

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20789868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 19:34:10  来源:igfitidea点击:

bootstrap 3 navbar-right no padding with navbar-fixed-top

csstwitter-bootstraptwitter-bootstrap-3

提问by cg505

I am trying to use a bootstrap navbar with things left-aligned and right-aligned.

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

Here's the code I have for the part on the right:

这是我右侧部分的代码:

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

This is within .navbar > .navbar-collapse. This works for the most part, except that the padding on the right isn't respected.

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

I have tested on chrome and firefox, and in both cases, the inspector's box model shows 15px of padding on the right, but when the page actually renders, there is no space between the content of the box and the scrollbar on the right of the page.

我在 chrome 和 firefox 上测试过,在这两种情况下,inspector 的框模型在右侧显示 15px 的填充,但是当页面实际呈现时,框的内容和右侧的滚动条之间没有空间页。

Here's a jsfiddle demonstrating the problem: http://jsfiddle.net/YQKZ3/.

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

EDIT: It appears that the problem only occurs when the navelement has the class navbar-fixed-top. What causes the inclusion of that class (which is needed) to screw up the padding on right-aligned things?

编辑:问题似乎只发生在nav元素具有 class 时navbar-fixed-top。是什么导致包含该类(这是必需的)来搞砸右对齐的东西的填充?

回答by Christina

http://jsfiddle.net/jmJWr/

http://jsfiddle.net/jmJWr/

Needs a .container just inside the .navbar then adjust the css.

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

.navbar > .container {width:auto;}

In a few days or so 3.1.0 will come out, then you can use .container-fluid and remove that css.

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

The documentation is wrong, here is the thread in the repo: https://github.com/twbs/bootstrap/issues/11783

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