Bootstrap 4 折叠跳转菜单

Question

我对 Bootstrap 4 菜单有疑问。每次我单击 "hamburger" 图标时，它都会折叠我的菜单，但在转换过程中，它会跳起来然后加载得很好。您可以在我的示例中看到：

<nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed">
    <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="img/logo_1.png"></a>

Answer 1

因为您在导航栏上设置了固定高度：

.navbar {
    padding: 0;
    height: 40px;
    background-color: rgba(242, 243, 244, .9) !important;
}

当你点击"hamburger"图标展开菜单时，菜单实际上溢出了。移除固定高度将摆脱跳跃问题。

我不确定我是否仅通过查看 HTML 就理解了您要构建的结构，因此我无法向您展示演示，但看起来您保留了很多 bs3 代码，即 navbar-fixed。试试你是否可以稍微清理一下你的 HTML 代码。

Bootstrap 4 折叠跳转菜单

Bootstrap 4 collapse jump menu

menu

collapse

navbar

bootstrap-4