html - 左栏汉堡包菜单 Bootstrap

Question

在我的应用程序中，当您以移动分辨率打开页面时，左侧栏会隐藏，但我无法执行“汉堡包按钮”工作。

我找到的每个解决方案都不起作用。

这是我的 HTML 代码:

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <div class="container-fluid">
                <div class="navbar navbar-default navbar-fixed-top" role="navigation">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#leftSidebar">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#">Project Name</a>
                        </div>
                    </div>
                </div>
                <div class="row row-offcanvas row-offcanvas-left row ">

                </div>
                <div class="container">
                    <div class="row row-offcanvas row-offcanvas-left">
                        <div class="col-sm-3 col-md-2 sidebar opficio dashMenuFont sidebar-offcanvas" id="leftSidebar" role="navigation">
                            <div class="nav-img">
                                <img src="img/userDefaultImage.png">
                                <p class="opficio-bold userName"><?php echo strtoupper($_SESSION ['nickUser']) ?></p>
                                <hr>
                            </div>
                            <div class="dash-menu">
                                <ul class="nav">
                                    <li><a href="dashboard.php?p=home"><span class="glyphicon glyphicon-home"></span> Início</a></li>
                                    <li><a href="dashboard.php?p=search"><span class="glyphicon glyphicon-search"></span> Buscar</a></li>
                                    <li><a href="dashboard.php?p=watched"><span class="glyphicon glyphicon-ok-circle"></span> Assistido</a></li>
                                    <li><a href="#"><span class="glyphicon glyphicon-comment"></span> Bate-papo</a></li>
                                    <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Config.</a></li>
                                </ul>
                            </div>
                            <hr>
                            <div class="nav-logo-bot">
                                <img src="img/nav-logo.png">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                        <?php
                        $link = filter_input(INPUT_GET, 'p');
                        include $link . ".php";
                        ?>
                    </div>
                </div>
            </div>

事实上，左侧栏隐藏，汉堡包按钮显示，但按钮不起作用，顶部栏留在我的页面顶部，当我删除它时，汉堡包按钮消失了

谢谢。

@编辑 应用程序如何: Tela web desktop

tela web mobile

Answer 1

我想你需要这个 <nav class="navbar navbar-default"> </nav>在你的代码中

在这里查看 https://www.w3schools.com/bootstrap/bootstrap_navbar.asp