html - 左栏汉堡包菜单 Bootstrap

标签 html css twitter-bootstrap

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

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

这是我的 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

最佳答案

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

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

关于html - 左栏汉堡包菜单 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47287264/

相关文章:

javascript - HTML类和CSS样式表之间的不理解

javascript - 无法在 Twitter Bootstrap 可切换选项卡中设置默认值

html - 较小屏幕中搜索栏形式的 CSS 问题

html - 在不设置固定大小的情况下,如何强制 ul 中的所有 li 元素与最大项的大小相同?

javascript - 切换 jquery 容器内的链接不起作用

html - 如何在内联 CSS 中写入 'a:hover'?

html - 样式表格式在 Django 元素中不起作用

html - 如何在左 :-20px;? 之后加宽 .li 右边缘

java - Apache Wicket 中两种形式的交互

javascript - 重定向后,我的 js 代码在刷新页面之前不起作用