悬停链接时导航栏边距出现问题

Question

我对 Bootstrap 导航栏有问题，我正在尝试做与 Twitter 相同的导航栏，一旦你将鼠标悬停在链接上，就会出现一个小边框底部，我已经达到了这种行为，但是有一次该边框出现 Navbar 的高度变化。我记录了this video for you to understant and also I prepared this CodePen；奇怪的是，当您将鼠标悬停在徽标部分时，导航栏的高度不会改变。

这是我的 css:

.capilleira-navbar{
  background: getColor(snow);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 1.1);
  a {
    color: getColor(night);
  }
  a:hover, a:focus {
    background: getColor(snow) !important;
    color: lighten(getColor(red), 10%);
    border-bottom: 4px solid lighten(getColor(red), 10%);
    margin: 0px;
    transition: all 0.3s ease 0s;
  }
}

这是我的导航栏：

<nav class="navbar capilleira-navbar">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#/lines">LOGO</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#/lines">Sports <span class="sr-only">(current)</span></a></li>
            <li><a href="javascript:void(0);">Poker</a></li>
            <li><a href="javascript:void(0);">Casino</a></li>
            <li><a href="javascript:void(0);">Horses</a></li>
            <li><a href="javascript:void(0);">Info</a></li>
          </ul>
        </div>
      </div><!--/.navbar-collapse -->
    </nav>

Answer 1

用box-shadow代替border，就没有这个问题

对于 css 中的 a:hover，请改用此方法

 a:hover, a:focus {
    background: getColor(snow) !important;
    color: red;
    box-shadow: inset 0px -4px 0px 0px red;//this <--
    margin: 0px;
    transition: all 0.3s ease 0s;
  }

Answer 2

RuteNL 说的... 或者你可以使用固定高度

a {
    color: getColor(night);
    height:50px;
  }

悬停链接时导航栏边距出现问题

Issue with navbar margin on hover their links

css

navbar

twitter-bootstrap