Bootstrap 3导航栏右边距不应该是-15px答案

【问题标题】：Bootstrap 3 navigation bar right margin is not supposed to be -15pxBootstrap 3导航栏右边距不应该是-15px
【发布时间】：2013-12-24 02:51:16
【问题描述】：

在我的网页中，我有一个 Bootstrap 3 导航栏：

<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Teachlab</a>
  </div>

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

    <ul class="nav navbar-nav navbar-right">
      <li><%= link_to "Home", '#' %></li>
      <li><%= link_to "Help", '#' %></li>
      <li><%= link_to "Sign in", '#' %></li>
    </ul>
  </div>
</nav>

<div class="container">
  <%= yield %>
</div>

</body>

问题是导航要靠近屏幕边缘。如果我从导航栏中删除 navbar-fixed-top，它会按我的意愿工作。

有什么提示吗？

【问题讨论】：

去掉navbar-fixed-top怎么样？或者在 CSS 中为该类添加一些额外的边距？
检查 CSS 并调试应用到它的 CSS 规则。如果删除 .navbar-fixed-top 解决了问题，则很可能是应用于该类的定义，您必须删除或覆盖它。
@Kenneth 如果这是新手的错误，我只是在徘徊。
@Axel 你能看看我的回答吗？
.navbar-right 位于 .collapse 容器上，而不是 ul 上。发布正确结构和示例的示例。

标签： html css twitter-bootstrap-3

【解决方案1】：

如果你有问题

margin-right: -15px;

在 .navbar-right 然后添加你的 CSS 样式

.navbar-right {
    margin-right: 0px; 
}

如果这仍然不起作用，请在您的 webstie 运行时从所有历史记录中清除您的浏览器并再次调试它。它有效:)

【讨论】：

【解决方案2】：

它坏了，won't fix 在3.x。破解它。

.navbar-right {
    margin-right: 0px;
}

【讨论】：

【解决方案3】：

我的解决方案不是那么优雅，但做得很快，添加最后一个列表项；

<li><span>&nbsp;&nbsp;</span></li>

【讨论】：

【解决方案4】：

解决办法是

 <!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
    </div>
</div>

它对我有用。

【讨论】：

【解决方案5】：

我今天遇到了完全相同的问题！根据 Bootstrap 文档，<ul class="nav navbar-nav navbar-right"> 是正确的。

和你一样，我通过将 nav navbar-nav navbar-right margin-right 设置为 0px 解决了这个问题，而没有注意到不必要的影响。

注意 .navbar-text.navbar-right:last-child 的 margin-right 值为 0px 而 .navbar-nav.navbar-right:last -child margin-right 值为-15px...奇怪吗？

https://github.com/twbs/bootstrap/issues/13325

【讨论】：

【解决方案6】：

从 3.1.1 开始使用 .container-fluid。

结构不正确。 .navbar-right 在 .collapse 容器上而不是在 ul 上。

示例：http://jsbin.com/eQIROsE/2/edit

    <div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header">
  <a class="navbar-brand" href="#">Project name</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button> 
  </div>
    <div class="navbar-collapse collapse navbar-right">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
        </ul>
      </div>
      <!--/.navbar-collapse -->
  </div>

【讨论】：

你确定吗？如果您查看文档 (getbootstrap.com/components/#navbar-default) 和 getboostrap.com 本身的来源，则会在 ul 上显示 .navbar-right 类。
如果你使用的 .container 是真的但他没有 .container，所以你把它贴在折叠处或者它一直推到边缘。
您的评论足以让我找出一个更复杂的问题，但解决方案在这里也应该有效。简而言之，您可以简单地将导航栏标题和姐妹元素包含在一个容器中（我使用的是流体容器）
是的，这是 3.1 之前的版本，所以容器流体不存在

【解决方案7】：

我真的不明白为什么你会有两个 .navbar-nav.navbar-right。只需将导航包裹在 .navbar-right 中即可。

<div class="navbar-right">
  <ul class="nav navbar-nav">...</ul>
  <ul class="nav navbar-nav">...</ul>
</div>

【讨论】：

【解决方案8】：

我最终覆盖了以下内容：

.navbar-nav.navbar-right:last-child {
    margin-right: 0;
}

但也许还有其他解决方案？

【讨论】：