Я не хочу, чтобы мои divs перекрывались, и они с загрузочным навигатором. Не мог бы кто-нибудь помочь мне в этом, так как я не уверен, почему он это сделал? Я даже пытался добавить некоторую позицию: relative; и положение: фиксированное;Перекрытие divs с помощью бутстрапа navbar

<!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>

Heres мой 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; 
}

источник

2014-09-01 user1944027