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導航欄按鈕未對齊

回答

相關問題