将鼠标悬停在链接上时，Bootstrap nav 将内容推送到下方

Question

我发现了一些类似的问题，但我没有找到解决方案，因为我的上面有一些简单的动画。所以让我们开始吧。我录制了 10 秒的短片来展示我的问题，请看HERE。也请看看这个Bootply。感谢您的帮助，我只是无法解决这个问题。 HTML

<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="row">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li><a href="">Women</a></li>
                    <li><a href="">Men</a></li>
                    <li><a href="">Junior</a></li>
                    <li><a href="">Accesories</a></li>
                    <li><a href="">Collections</a></li>
                    <li><a href=""><span style="color:#f05050;">Sale</span></a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="">My Account</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

CSS

.navbar {
    margin-top: 10px;
}

.navbar-default {
    border-width: 0px;
    border-radius: 0px;
    font-size: 12px;
    font-weight: bold;
    color: black;
    border-bottom: 5px solid #000000;
    color: #FFF;
    background: #fff;
}

.navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a {
    text-shadow: none;
    color: #000000;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > ul > li, .navbar-default .navbar-nav > li.focus > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:visited, .navbar-default .navbar-nav > li:hover > a:hover {
    background-image: #1c2b36;
    background: #1c2b36;
    background-color: #1c2b36 !important;
    color: #FFF;
    border-bottom: 5px solid #3bc0c3;
    -webkit-transition: all ease-in .1s;
    -o-transition: all ease-in .1s;
    -moz-transition: all ease-in .1s;
    -ms-transition: all ease-in .1s;
    transition: all ease-in .1s;
}

Answer 1

应用的边框占用了额外的空间，因此将其向下推。 对 li 元素或元素尝试此操作，当您将鼠标悬停在其上时会绘制边框。我猜主要是li标签

.navbar-nav>li {
  box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

（或）

你可以给li添加一个不可见的border-bottom元素，这样当它悬停时，只有颜色变化，内容不会被下推。像这样：

.navbar-nav>li {
    border-bottom:5px solid transparent;
}

编辑：

根据您的 bootply 执行此操作：

.navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a {
    text-shadow: none;
    color: #000000;
    border-bottom:5px solid transparent; //add this in CSS already present there
}