Question

我正在为我的网站开发一个带Bootstrap的自适应导航栏。除了一件事，我总是想出来。在屏幕为width < ~775px的设备上，按钮垂直堆叠而不是水平堆叠，第一个按钮向左延伸一点，与其余按钮不对齐。造成这种情况的原因是什么，以及如何解决？

JSFiddle：scaladoc

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。简单的＆＃34; li＆＃34;选择器会将样式应用于div中的每个li，并使用＆＃34; navpills＆＃34;类。

请参阅W3.org上的adjacent selectors。

垂直Bootstrap Navbar按钮未对齐

1 个答案: