html - Bootstrap 4 navbar-toggler 位置随定义的高度变化？

Question

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

我现在在两个独立的元素中遇到了这个问题。在 bootstrap 4 中，如果 nav 元素具有定义的高度，则 navbar-toggler 按钮的位置是单击时的移动位置。

我创建了一个 fiddle 来显示问题: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

好吧，我遇到了确切的问题并尝试了一些实验并修复了它，只需在自定义 css 文件中定义它来覆盖填充问题:

.navbar {padding: 1.5rem 1rem;}