Question

我得到了切换 - 折叠煎饼按钮，适用于小屏幕，但当菜单展开时，它会覆盖部分屏幕。如何让菜单扩展到覆盖屏幕？我试着降低身体，但是效果不好。

<!doctyp html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">        
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

        <style>
            body { padding-top:50px; }
        </style>

    </head>
    <body>

        <header>
                <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                    <div class="container">

                        <!-- The button that shows when the width is too short -->
                        <div class="navbar-header">                            
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>

                            <a class="navbar-brand" ><span class="subhead"></span>Project 1</a>
                        </div>                   
                            <!-- The navigation menu. It collapses when the width is too short -->
                            <div id="collapse" class="collapse navbar-collapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href="#browse">browse</a></li>
                                    <li><a href="#why">why</a></li>
                                    <li><a href="#about">about</a></li>                                    
                                </ul>
                            </div>
                    </div>
                </nav>

        </header>


        <section>
            <h3>Project 1 incomplete</h3>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </section>

    </body>


</html>

Answer 1

由于你没有提到你需要固定的顶级行为，所以没有这种行为就行了。

如果您想要修复顶级行为，则需要通过JavaScript进行管理。

如果对您有帮助，请检查以下代码段并发表您的评论：

mat[i].length

mat[0].length

bootstrap切换折叠煎饼按钮，不覆盖页面

1 个答案: