2014-07-14 66 views
0

我正在使用bootstreap 3.我的代碼在div .navbar以下顯示正確。 但問題是.container它沒有顯示我應該做怎樣的改變才能正常工作,它.container下面沒有顯示.navbar

<body> 
     <div class="navbar navbar-inverse navbar-fixed-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="#">My Office</a> 
       </div> 
       <div class="navbar-collapse collapse pull-right top-margin"> 
        <form class="form-inline" method="post" action="login"> 
         <div class="form-group"> 
          <input type="text" placeholder="Username" name="userName" class="form-control"> 
         </div> 
         <div class="form-group"> 
          <input type="password" placeholder="Password" name="password" class="form-control"> 
         </div> 
         <button type="submit" class="btn btn-success">Sign in</button> 
        </form> 
       </div><!--/.navbar-collapse --> 
      </div> 
     </div> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs10">Join us</div> 
       <div class="col-xs-2"> 
        <button type="submit" class="btn btn-default">Sign Up</button> 
       </div> 
      </div> 
     </div> 
    </body> 

回答

2

您需要填充添加到body的頂部固定導航欄下面的.navbar

body { padding-top: 70px; }

從文檔:

固定NA vbar會覆蓋您的其他內容,除非您將 填充添加到<正文的頂部。嘗試自己的價值觀或使用下面的 代碼段。提示:默認情況下,導航欄高50px。