Vertical Bootstrap导航栏按钮未对齐

我正在为Bootstrap为我的网站设置响应式导航栏。除了一件事之外，我主要想到了它。在屏幕为width < ~775px的设备上，使按钮垂直堆叠而不是水平堆叠，第一个按钮向左延伸一点，与其余按钮错开。这是什么原因造成的，我该如何解决？Vertical Bootstrap导航栏按钮未对齐

的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; 
    } 
}

来源

2016-01-20 Duncan X Simpson

我在这的jsfiddle固定的：https://jsfiddle.net/xpn779Lr/1/

它覆盖缺省引导程序规则

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

到

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

FYI，这个CSS规则具有高度的特异性。

加号表示该样式仅适用于li直接跟在另一个li之后。一个简单的“li”选择器会将样式应用于div中的每个li，并带有“navpills”类。

请参阅W3.org上的adjacent selectors。

来源

2016-01-20 19:16:30 jbg

我在CSS中经验不足，能否请您在答案中解释li + li的含义，以及为什么它只影响第一个？谢谢。 –

我现在明白 - 它会影响一切，但第一个。公认。谢谢！ –

Vertical Bootstrap导航栏按钮未对齐

回答

相关问题