Bootstrap：导航栏项目链接在悬停时移动视图切换导航栏

Question

我正在做一个项目，我遇到了这个问题，当在移动设备上查看菜单并且您尝试将鼠标悬停时，它会移动其他菜单并移动 navbar 大小.

a.nav-link{
        letter-spacing: 0.1rem;
        color: green !important;
        border: 0.1rem solid transparent;
    }
    
    a.nav-active, a.nav-link:hover{
        border: 0.1rem solid #fff;
        color: #fff !important;
        transition: all 0.009s ease;
    }
    
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler-icon:focus {
        outline: none;
        box-shadow: none;
    }

<div class="container-fluid pr-0 pl-0">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">BLANK</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="nav-icon-color" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
            </button>
    
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link mr-4 nav-active" href="#">HOME <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-4" href="#">SERVICES</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-4" href="#">ABOUT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-4" href="#">CONTACT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-4" href="#">LOCATION</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

这是 JSFiddle：https://jsfiddle.net/u6dqhts0/1/

知道是什么原因造成的吗？

Answer 1

使用 updated JSFiddle 我注意到 <li> items 的 内容大小 在悬停期间确实发生了变化。

原因是因为在您的代码中您将边框设置为 none，因此该项目所需的有效 内容大小 在悬停时突然降低了在它上面，并在移动鼠标光标时再次抬起。

以下代码需要在您的 CSS 中 inserted/updated 才能正常工作（代码在更新 Fiddle 中使用，但未在 post 中显示） .

@media only screen and (max-width: 990px) {
    a.nav-link {
        border: 0.1rem solid transparent;
    }

    a.nav-active, a.nav-link:hover{
        border: 0.1rem solid transparent;
        color:#fff !important;
        transition: all 0.007s ease;
    }
}

真正的解决方案是在悬停期间将边框设置为透明，这就是真正需要的。

此 JSFiddle 中的示例。

Bootstrap：导航栏项目链接在悬停时移动视图切换导航栏

Bootstrap: Navbar items links are moving on mobile view toggle navbar when hover

html

css

cross-platform

hover

twitter-bootstrap