Bootstrap导航栏样式问题

Question

这是一个相当小的问题，但足以使我失望。 有时我发誓我患有强迫症，尽管没有被诊断出。

发生的事情是我正在公司的网站上（正在创建自己的公司）。 我使用的是navbar-default，并对其进行自定义以适合我想要的配色方案。

不过，有一个问题（请参见下面的链接图片）：

问题的屏幕截图

这是我的导航栏上最右边的点。 您可以清楚地看到，结尾处大约有15像素的空间，与其余导航栏的颜色不同。 它是浅灰色（根据默认的Bootstrap样式），而不是白色（我的自定义样式）。 我目前正在使用内联CSS样式来尝试找出导致此问题的类，但似乎无法做到这一点。

请帮忙？

导航栏代码：

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#s2s-navigation">
    <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="/"><img src="img/s2s-logo-brand.png" /></a>
</div>
<div class="collapse navbar-collapse" id="s2s-navigation">
  <ul class="nav navbar-nav navbar-right">
    <li class="active"><a id="home" href="pages/home">Home <span class="sr-only">(current)</span></a></li>
    <li><a id="about" href="pages/about">About</a></li>
    <li><a id="programs" href="pages/programs">Programs</a></li>
    <li><a id="contact" href="pages/contact">Contact</a></li>
    <li><a id="help" href="pages/help">Help</a></li>
    <li><a id="legal" href="pages/legal">Legal</a></li>
  </ul>
</div>

CSS（视情况而定）：

#s2s-navigation { background: #FFFFFF; }
a#home, a#about, a#programs, a#contact, a#help, a#legal { color: #3BBEFF; }

（是的，我知道我可以写得更好一些。）

Answer 1

您定位#s2s-navigation错误的#s2s-navigation ，因为它包装在有padding: 0 15px;的容器内padding: 0 15px; 因此，最后15像素的background-color被漏掉了。

简单的解决方法就是改变

#s2s-navigation { background: #FFFFFF; }

至

.navbar { background: #FFFFFF; }

Answer 2

.container-fluid的默认填充为15px它环绕在样式导航中。 设置高级容器的样式，例如`.navbar-default'