垂直 Bootstrap 导航栏按钮未对齐

Question

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

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/

这会覆盖默认的 bootstrap 规则

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

到

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

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

加号表示该样式仅适用于直接跟在另一个里后面的里。一个普通的 "li" 选择器会将样式应用到 div 中的每个 li 与 "navpills" class.

参见 W3.org 上的 adjacent selectors。

垂直 Bootstrap 导航栏按钮未对齐

Vertical Bootstrap Navbar Button Misaligned

html

css

nav

navbar

twitter-bootstrap