Bootstrap導航欄正在擴展到下一個容器

我的問題是，我放在導航欄下的所有內容最終都會進入導航欄容器。我相信這是一些基本的東西（就像一個被遺忘的div），但我無法發現它。我的代碼有什麼問題？下面的代碼：Bootstrap導航欄正在擴展到下一個容器

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Second Website</title> 
     <link href="style.css" rel="stylesheet"> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 

     </script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    </head> 

    <body> 

     <!-- Navigation --> 

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <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="#">Brand Name</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <a href="#"><span class="glyphicon glyphicon-home"></span>Home</a> 
        </li> 
        <li> 
         <a href="#"><span class="fa fa-database"></span>Products</a> 
        </li> 
        <li> 
         <a href="#"><span class="fa fa-book"></span>Contact</a> 
        </li> 
          <li class="slide"><a href="#" class="btn-slide1"><span class="fa fa-pencil"></span>Register</a></li> 
          <li class="slide"><a href="#" class="btn-slide2"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 


      <div class="container"> 

       <div class="row"> 

        <div class="col-md-10 col-md-offset-1"> 

         <!-- About us title and description--> 

          <h2>About us</h2> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus ultricies nibh, vitae sodales purus. Aenean volutpat ullamcorper cursus. Duis tristique sit amet augue ac vestibulum.</p> 



         </div> 

        </div> 


       </div> 

      </div> 


    </div> 
</div> 
    </body> 
</html>

而CSS：

body { 
    font-family: 'Raleway', sans-serif; 
} 

/* =========== NAVIGATION ============ */ 
.navbar { 
    min-height: 32px !important; 
} 
.navbar .navbar-brand{ 
    padding: 0 12px; 
    font-size: 16px; 
    line-height: 38px; 
    height: 38px; 
} 
.navbar .navbar-nav > li > a { 
    padding-top: 0px; 
    padding-bottom: 0px; 
    line-height: 38px; 
} 
.navbar .navbar-toggle { 
    margin-top: 3px; 
    margin-bottom: 0px; 
    padding: 8px 9px; 
} 
.navbar .navbar-collapse { 
    border-color: #2f2f2f; 
}

來源

2017-05-26 Joel Li

使用下面的CSS class，並添加到container

.marginTop { 
    margin-top:50px; 
}

這裏正在撥弄

update code

body { 
 
    font-family: 'Raleway', sans-serif; 
 
} 
 

 
/* =========== NAVIGATION ============ */ 
 
.navbar { 
 
    min-height: 32px !important; 
 
} 
 
.navbar .navbar-brand{ 
 
    padding: 0 12px; 
 
    font-size: 16px; 
 
    line-height: 38px; 
 
    height: 38px; 
 
} 
 
.navbar .navbar-nav > li > a { 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    line-height: 38px; 
 
} 
 
.navbar .navbar-toggle { 
 
    margin-top: 3px; 
 
    margin-bottom: 0px; 
 
    padding: 8px 9px; 
 
} 
 
.navbar .navbar-collapse { 
 
    border-color: #2f2f2f; 
 
} 
 

 
.marginTop { 
 
    margin-top:50px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Second Website</title> 
 
     <link href="style.css" rel="stylesheet"> 
 
     <!-- Latest compiled and minified CSS --> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
 

 
     </script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    </head> 
 

 
    <body> 
 

 
     <!-- Navigation --> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
     <div class="container"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
        <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="#">Brand Name</a> 
 
      </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li> 
 
         <a href="#"><span class="glyphicon glyphicon-home"></span>Home</a> 
 
        </li> 
 
        <li> 
 
         <a href="#"><span class="fa fa-database"></span>Products</a> 
 
        </li> 
 
        <li> 
 
         <a href="#"><span class="fa fa-book"></span>Contact</a> 
 
        </li> 
 
          <li class="slide"><a href="#" class="btn-slide1"><span class="fa fa-pencil"></span>Register</a></li> 
 
          <li class="slide"><a href="#" class="btn-slide2"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav> 
 

 

 
      <div class="container marginTop"> 
 

 
       <div class="row"> 
 

 
        <div class="col-md-10 col-md-offset-1"> 
 

 
         <!-- About us title and description--> 
 

 
          <h2>About us</h2> 
 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus ultricies nibh, vitae sodales purus. Aenean volutpat ullamcorper cursus. Duis tristique sit amet augue ac vestibulum.</p> 
 

 

 

 
         </div> 
 

 
        </div> 
 

 

 
       </div> 
 

 
      </div> 
 

 

 
    </div> 
 
</div> 
 
    </body> 
 
</html>

來源

2017-05-26 08:16:26 LKG

但我希望它被固定在上面。那將如何影響下一個容器？至於最後3個div，是的，我刪除了它們，但仍然一樣。 –

檢查我的更新答案與工作小提琴 – LKG

它的工作，謝謝。但爲什麼固定頂級命令會這樣做？它爲什麼與其他容器重疊？ –

Bootstrap導航欄正在擴展到下一個容器

回答

相關問題