DEMO

Question

我不希望我的div重叠，并且它们与引导程序导航栏一起使用。有人可以帮我这个，因为我不确定为什么这样做？我甚至试图增加一些立场：亲戚;和位置：固定;

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>MinecraftServerList | Minecraft Server List</title>
        <link rel="stylesheet" href="css/main.css">
        <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <div class="navbar navbar-default-green navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.minecraftserverlist.com"><i class="glyphicon glyphicon-home"></i> Home</a></li>
                        <li><a href="http://www.minecraftserverlist.com/"><i class="glyphicon glyphicon-star"></i> Sponsors</a></li>
                        <li><a href="http://www.minecraftserverlist.com"><i class="glyphicon glyphicon-comment"></i> Forums</a></li>
                        <li><a href="http://www.minecraftserverlist.com"><i class="glyphicon glyphicon-wrench"></i> Tools</a></li>
                        <li><a href="http://www.minecraftserverlist.com"><i class="glyphicon glyphicon-question-sign"></i> Support</a></li>
                    </ul>
                    <form class="navbar-form navbar-right" role="form">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="header-container">
            <div class="brand">
                <div class="container">
                    MinecraftServerList.com
                </div>
            </div>
            <div class="ad">
                <div class="container">
                    Your ad could be here!
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="container">
                © MinecraftServerList | Made by Joel Evans and Sebastian Semma | Minecraft is copyright Mojang and is not affiliated with this site.
            </div>
        </div>
    </body>

</html>

继承我的CSS

.navbar-default-green {
    background-color: #009933;
    border-color: #559a4b;
    font-family: 'Roboto Condensed', sans-serif;
}
.header-container {
    margin: 0;
}
.brand {
    margin: 0;
    width: 100%;
    height: 130px;
    background-color: #EFEFEF;
    border-bottom-color: #DDD;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-family: 'Roboto Condensed', sans-serif;
}
.ad {
    margin: 0;
    width: 100%;
    height: 150px;
    background-color: #FFF;
    border-bottom-color: #DDD;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    text-align: center;
    vertical-align: center;
    font-style: italic;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 150px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #EFEFEF;
    text-align: center;
    vertical-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 50px;
}

Answer 1

试试这个：

在正文标记中使用padding-top

<body style="padding-top:50px">

这就是为什么因为导航栏设置为固定在顶部，所以它会粘在顶部并与下面的div重叠

DEMO

希望这对你有用

使用bootstrap导航栏重叠div

1 个答案:

DEMO