Boostrap導航鏈接在鼠標懸停時發生尷尬跳躍

Question

因此，我有一個Bootstrap導航欄，您可以看到多少使用CSS進行了自定義。但是當我將鼠標懸停在標籤上時，這些鏈接會跳轉到左側或右側。有沒有人有一個想法是什麼問題，以及如何解決它？下面是一個代碼和小提琴。

的jsfiddle：http://jsfiddle.net/nJfAZ/3391/

HTML：

<ul class="nav nav-tabs nav-justified" role="tablist"> 
     <li><a href="kolekcija.html">Collection</a></li> 
     <li><a href="#">Products</a></li> 
     <li><a href="#">Story</a></li> 
     <li><a href="#">Press</a></li> 
     <li><a href="#">Materials</a></li> 
    </ul> 

CSS：

body { 
    font-size: 2em; 
} 

.nav > li > a:hover, 
.nav > li > a:focus { 
    background-color: transparent; 
    border: none; 
} 

.nav > li > a { 
    margin-left: -2em; 
    padding: 10px 5px; 
} 

.nav-tabs.nav-justified > li > a { 
    border-bottom: none; 
} 

.nav-tabs > li > a:hover { 
    border-color: none !important; 
} 

Answer 1

引導默認適用邊界，當你刪除它，它會導致跳。只是改變顏色爲透明，而不是：

.nav > li > a:hover, 
.nav > li > a:focus { 
    background-color: transparent; 
    border-color: transparent; 
} 

jsFiddle example