垂直引导导航栏按钮未对齐

Question

我正在为我的网站使用 Bootstrap 开发响应式导航栏。我基本上已经弄清楚了，除了一件事。在屏幕为width < ~775px 的设备上，按钮垂直堆叠而不是水平堆叠，第一个向左延伸一点，与其余按钮不对齐。这是什么原因造成的，我该如何解决？

JSFiddle：https://jsfiddle.net/w10cspvv/

HTML：

<div id="navbar">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="nav nav-pills nav-justified">
        <li role="presentation" class="active navbutton">
          <a href="/"><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>Home</span></a>
        </li>
        <li role='presentation' class='active navbutton'>
          <a href='/about.php'><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>About</span></a>
        </li>
        <li role='presentation' class='active navbutton'>
          <a href='/contact.php'><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>Contact</span></a>
        </li>
      </ul>
    </div>
  </nav>
</div>

CSS：

body {
  background-color: black;
  font-size: 16pt;
  margin-top: 2em;
}

#navbar {
  border: .25em solid #00aeef;
  background-color: #00aeef;
  border-radius: 25px;
}

.navbar {
  margin-bottom: 0em;
}

.navbar-default {
  border-radius: 25px;
  border-color: #00aeef;
  background: #00aeef;
}

.main {
  font-family: Ubuntu, Tahoma, Geneva, sans-serif;
  margin-left: 6em;
  margin-right: 6em;
  text-align: center;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  background-color: #7F00FF;
}

.squidanim {
  display: none;
}

.navbutton:hover a > .squidanim {
  display: block;
  height: 50px;
  position: absolute;
  z-index: 100;
}

.navbutton {
  padding-left: 2em;
  padding-right: 2em;
}

.nav > li > a {
  padding-top: 0;
  padding-bottom: 0;
}

.nav > li > a > span {
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (max-width: 978px) {
  #navbar {
    margin-left: 2em;
    margin-right: 2em;
  }
  .main {
    margin-left: 1em;
    margin-right: 1em;
  }
  .navbutton {
    padding-left: 0;
    padding-right: 0;
  }
}

Answer 1

我已经在这个 JSFiddle 中修复了这个问题：https://jsfiddle.net/xpn779Lr/1/

覆盖默认引导规则

.nav-pills>li+li {
  margin-left: 2px;
}

到

.nav-pills>li+li {
  margin-left: 0;
}

仅供参考，这个 css 规则具有很高的特异性。

加号表示该样式仅适用于紧跟在另一个 li 之后的 li。 一个普通的“li”选择器会将样式应用到 div 中带有“navpills”类的每个 li。

请参阅 W3.org 上的 adjacent selectors。