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

【问题标题】：Bootstrap: Navbar items links are moving on mobile view toggle navbar when hoverBootstrap：导航栏项目链接在悬停时在移动视图切换导航栏上移动
【发布时间】：2020-11-16 16:58:55
【问题描述】：

我正在做一个项目，我遇到了这个问题，当在移动设备上查看菜单并尝试将鼠标悬停时，它会移动其他菜单并移动 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/

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

【问题讨论】：

在小屏幕上查看时看不到菜单（低于 Bootstrap L 设置）。
更新了小提琴。

标签： html css twitter-bootstrap hover cross-platform

【解决方案1】：

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

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

需要在您的 CSS 中插入/更新以下代码才能使其正常工作（代码用于更新 Fiddle，但未在帖子中显示）。

@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 中的示例。

【讨论】：