Bootstrap菜单折叠无响应

时间:2019-05-26 05:06:10

标签: menu responsive collapse

除非全屏切换按钮,否则我的菜单不可见。当我将屏幕调整为移动设备尺寸时,必须点击按钮才能看到菜单。

我已经多次玩过这些类,并用容器重新包装了divs。

    <!--************************** Stylesheet ******************************-->
    <link rel="stylesheet" href="../../frameworks/bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">


    <!--*************************** Bootstrap ********************************-->


</head>

<body>

<!-- Container element -->
    <!-- <div class="parallax"> -->
    <div class="parallax">
        <header>

            <!-- Collapsible content -->
            <div class="navbar navbar-fixed-top">
                <div class="container">

                    <!--navbar-header-->
                    <div class="navbar-header">

                    <!-- Collapse button -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-menu"></span>
                        </button>

                        <!-- Navbar brand -->
                        <a class="navbar-brand justify-content-left py-4" href="#"></a>

                    </div> <!--end navbar-header-->

                        <!-- Links -->
                        <div class="collapse navbar-collapse">
                            <ul class="nav justify-content-center py-4 white-text">
                                <li class="nav-item"><a class="nav-link white-text" href="#!">About</a></li>
                                <li class="nav-item"><a class="nav-link white-text" href="#!">Expertise</a></li>
                                <li class="nav-item"><a class="nav-link white-text" href="#!">Portfolio</a></li>
                                <li class="nav-item"><a class="nav-link white-text" href="#!">Projects</a></li>
                            </ul>
                        </div>

                </div>
            </div>
            <!-- Collapsible content -->
        </header>

    </div>

<!-- </div> -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="../../frameworks/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

</body>

除非全屏切换按钮,否则我的菜单不可见。当我将屏幕调整为移动设备尺寸时,我必须点击按钮才能看到菜单。我希望菜单默认显示在桌面屏幕上。当我将屏幕调整为可移动设备的尺寸时,我希望看到菜单图标,当选择菜单时,菜单应该可见并且可以选择。

0 个答案:

没有答案