时间戳

首页 > 解决方案 > Bootstrap 4 折叠跳转菜单

menu - Bootstrap 4 折叠跳转菜单

问题描述

我对 Bootstrap 4 菜单有疑问。每次我单击“汉堡包”图标时，它都会折叠我的菜单，但在过渡期间，它会跳起来然后加载就好了。您可以在我的示例中看到：

JSFiddle

<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>

标签： menubootstrap-4navbarcollapse

解决方案

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

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

当你点击“汉堡”图标展开菜单时，菜单实际上已经溢出。删除固定高度将摆脱跳跃问题。

我不确定我是否通过查看您的 HTML 来理解您要构建的内容，所以我无法向您展示演示，但看起来您有许多 bs3 代码被继承，即navbar-fixed. 试试你是否可以稍微清理一下你的 HTML 代码。

推荐阅读