Question

我在我的网页上使用了bootstap菜单，但当我点击第二个菜单时，他会覆盖DIV的标题，就像在这张图片中一样。

HTML code：

<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse navbar-out-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" href="index.html">
                    <img src="https://placehold.it/153X50">
                </a>                    
            </div>
            <div class="navbar-collapse collapse" aria-expanded="false" style="height: 0px;">
                <ul class="nav navbar-nav navbar-right">                 
                    <li class="scroll"><a href="#home">Home</a></li>
                    <li class="scroll active"><a href="#services">Menu 1</a></li>                     
                    <li class="scroll"><a href="#doctors">Menu 2</a></li>
                    <li class="scroll"><a href="#about-us">Menu 3</a></li> 
                    <li class="scroll"><a href="#gallery">Gallery</a></li>
                    <li class="scroll"><a href="#contact">Contact</a></li>       
                </ul>
            </div>
        </div>
    </nav>

CSS代码：

@media(min-width:767px) {
.navbar {
    padding: 20px 0;
    -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    transition: background .5s ease-in-out,padding .5s ease-in-out;
}


}

我可以用jQuery解决这个问题吗？

Answer 1

给章节填充 例如：

#services {
   padding:100px 0;
}

填充必须超过导航栏高度

Answer 2

你改变了z指数吗？

检查z-index，按F12键选择开发者选项。

发布完整的HTML代码

Answer 3

你需要一些Body padding

固定导航栏将覆盖您的其他内容，而不是为每个容器div添加填充。你可以添加一些填充''。默认情况下，导航栏高50像素。您需要添加超过导航栏高度的填充。

body{
    padding-top: 70px;
}

如果这不起作用，则将class =“clearfix”添加到容器div（代码中的第二行）

滚动时，引导菜单覆盖Div的标题

3 个答案: