Question

所以，我有一个Bootstrap导航栏，你可以看到或多或少用CSS定制。但当我将鼠标悬停在<a>标签上时，这些链接会向左或向右跳跃。有谁知道问题是什么以及如何解决？下面是一个代码和小提琴。

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

Bootstrap导航链接使鼠标悬停变得笨拙

1 个答案: