Question

我有一个Bootstrap Navbar的问题，我试图做与Twitter相同的导航栏，一旦你悬停在链接上，出现一个小的边框底部，我已经达到了这个行为，但是一旦那个边框出现了高度导航栏发生了变化。我记录this video让你明白，我也准备了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，而是没有这个问题。

对于你的a：悬停在css中使用此代替

 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;
  }

挂起链接时出现导航栏边距问题

2 个答案: