Bootstrap 4 导航栏切换器位置随定义的高度而变化？

Question

如果你能想到一个更好的标题，请为这个问题提出一个更好的标题。

我现在在两个独立的项目中遇到了这个问题。在引导程序 4 中，如果导航元素具有定义的高度，则导航栏切换按钮的位置在单击时是移动位置。

我创建了一个小提琴来显示问题：https : //jsfiddle.net/3xLwf19L/1/

尝试在 .navbar-custom 具有高度时单击图标，并在未定义高度时重试。

谁能解释为什么会发生这种情况，如果有的话，解决方案是什么？

HTML：

<nav id="site-navbar" class="navbar navbar-expand-lg navbar-light navbar-custom fixed-top smooth-slow">
    <div class="container">
        <button class="navbar-toggler .navbar-inverse hamburger-icon" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div id="navbarSupportedContent" class="collapse navbar-collapse">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link smooth-slow" href="">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link smooth-slow" href="">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS：

.navbar-custom {
    /*height: 80px;*/
    background-color: #FDC529;
    font-family: "Roboto Condensed", sans-serif;
    border-width: 0 0 1px; 
}

Answer 1

我想你指的是这个：

.navbar {
    padding: .5rem 1rem;
}