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

（OR）

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

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

当将鼠标悬停在链接上时，Bootstrap导航会将内容推送到下方

1 个答案: