Question

这是一个相当小的问题，但足以让我陷入困境。有时我发誓我有强迫症，但没有被诊断出来。

我正在进行的是我在公司网站上工作（创办自己的公司）。我正在使用navbar-default，并自定义它以适应我想要的配色方案。

但有一个问题（见下面的链接图片）：

这是我导航栏上最右边的一点。您可以清楚地看到，那里的末端有15px的空间，与导航栏的其余部分颜色不同。它是浅灰色（来自默认的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

您定位opts.poll这是不正确的，因为它被包装在一个#s2s-navigation的容器中，因此padding: 0 15px;错过了最后15px。

简单修复就是改变

background-color

到

#s2s-navigation { background: #FFFFFF; }

Answer 2

.container-fluid默认填充为15px 这是围绕您的样式导航。设置更高级别的容器，例如`.navbar-default＆＃39;

Bootstrap导航栏样式问题

2 个答案: