Bootstrap 悬停在链接上时导航将内容推送到下方

Question

我发现了一些类似的问题，但我没有找到解决方案，因为我的有一些简单的动画。所以让我们开始吧。我录制了 10 秒的短片来展示我的问题，请看一下 HERE. Please also take a look at this 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

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

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

（或）

你可以添加一个不可见的 border-bottom 到 li 元素，这样当它被悬停时，只有颜色改变而内容不会被推送 down.Like this:

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

编辑：

根据您的引导执行此操作：

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

Bootstrap 悬停在链接上时导航将内容推送到下方

Bootstrap nav pushes content below around when hovering over links

html

css

navigationbar

twitter-bootstrap