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

Question

我对 Bootstrap Navbar 有问题，我正在尝试做与 Twitter 相同的导航栏，一旦你将鼠标悬停在链接上，就会出现一个小边框底部，我已经达到了那个行为，但是一旦那个边框出现的高度导航栏更改。我记录了this video为了你了解我也准备了this CodePen ;奇怪的是，当您将鼠标悬停在 Logo 部分时，导航栏的高度不会改变。

这是我的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;
  }