jquery - Bootstrap 导航链接在鼠标悬停时笨拙地跳转

Question

所以，我有一个 Bootstrap 导航栏，您可以看到它或多或少是用 CSS 定制的。但是当我将鼠标悬停在 <a> 上时标记这些链接向左或向右跳转。有谁知道问题出在哪里以及如何解决？下面是代码和 fiddle 。

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

Bootstrap 默认应用边框，当你移除它时它会导致跳转。只需将颜色更改为透明即可:

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

jsFiddle example