Question

在我的网页中，我有一个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 ，它会按我的意愿运行。

任何提示？

Answer 1

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

Answer 2

我最终压倒了以下内容：

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

但也许有另一种解决方案？

Answer 3

它在3.x中被破坏了won't fix。劈开它。

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

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

它对我有用。

Answer 5

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

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

Answer 6

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

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

请注意 .navbar-text .navbar-right：last-child的边距右边值是0px而 .navbar-nav .navbar-right：last -child margin-right value是-15px ...奇怪？

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

Answer 7

我不是那么优雅的解决方案，但是很快完成工作，添加最后一个列表项;

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

Answer 8

如果您有问题

margin-right：-15px;

<。>在.navbar-right然后只需添加你的CSS样式

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

如果在您的网站运行时仍然无法从所有历史记录中清除浏览器并再次进行调试。它有效：）

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

8 个答案: