引导汉堡菜单与移动视图上的导航项目折叠答案

【问题标题】：bootstrap hamburger menu is collapsing with the nav items on mobile view引导汉堡菜单与移动视图上的导航项目折叠
【发布时间】：2020-08-09 03:03:50
【问题描述】：

每当我单击汉堡菜单图标时，它就会与导航项一起折叠！我现在应该怎么做才能解决这个问题？

导航栏

<header>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-12">
                    <nav class="navbar navbar-toggleable-md fixed-top d-flex justify-content-center">
                        <a class="navbar-brand animated  heartBeat delay-.5s" href="#home"><img class="img-fluid logo"
                                src="./Assets/Logos/LogoMakr_8A9Y2n.png" alt=""></a>
                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                            data-target="#vesco-menu" aria-controls="vesco-menu" aria-expanded="false"
                            aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"><i class="fas fa-bars"
                                    style="color:#fff; font-size: 30px; "></i>
                            </span>
                        </button>
                        <div class="collapse navbar-collapse justify-content-end" id="vesco-menu">
                            <div class="navbar-nav nav nav-pills animated  fadeInRight delay-1s">
                                <a class="nav-item nav-link active" href="#home">Home <span
                                        class="sr-only">(current)</span></a>
                                <a class="nav-item nav-link" href="#project">portfolios</a>
                                <a class="nav-item nav-link" href="#skills">skills</a>
                                <a class="nav-item nav-link" id="downlink" href="./Assets/RESUME.docx"
                                    download>Resume</a>
                                <a class="nav-item nav-link" href="#testimonials">Testimonials</a>
                                <a class="nav-item nav-link" href="#contact">CONTACT ME</a>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>

【问题讨论】：

您应该在您的问题中添加更多信息。预期的行为是什么？你试过什么？您是否发布了所有代码？

标签： html css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

在我的机器上它工作正常，我认为问题出在你的自定义 CSS 中，但我展示了一个在 bootstrap 4 中不存在的类，所以我建议你替换它。

将navbar-toggleable-md 替换为navbar-expand-md

【讨论】：