Bootstrap導航欄未對齊

由於某些原因，我的導航欄似乎有0個頂部填充並略微偏離右側。Bootstrap導航欄未對齊

這個HTML幾乎是直接複製&從這個例子中粘貼出來，我不能爲了我的生活而弄清楚爲什麼它不起作用。

<%@ Master Language="C#" AutoEventWireup="true"%> 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <meta charset="utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 
    <title>Main master</title> 
</head> 
<body> 
    <div class="container"> 
     <div class="container"> 
      <nav class="navbar navbar-default"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a class="navbar-brand" href="#">Test Demo</a> 
        </div> 
        <div class="collapse navbar-collapse" id="navbar"> 
         <ul class="nav navbar-nav"> 
          <li><a href="#">GitHub</a></li> 
          <li><a href="#">NuGet</a></li> 
          <li class="dropdown"> 
           <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Demos <span class="caret"></span></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">demo</a></li> 
            <li><a href="#">demo</a></li> 
           </ul> 
          </li>      
         </ul>           
        </div> 
       </div> 
      </nav> 
     </div> 

    <div class="container"> 
     <asp:ContentPlaceHolder ID="ContentSection" runat="server"> 
     </asp:ContentPlaceHolder> 
    </div> 

</div> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

</body> 
</html>

來源

2016-02-18 Doombox

你可以發佈你的代碼，所以我們可以調試它嗎？ –

添加了代碼，它是從提供的示例中直接複製和粘貼的代碼。 – Doombox

引導似乎需要自定義的.css文件的一些屬性，在這種情況下，導航欄頂部的處理是由「navbar.css」

body { 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

.navbar { 
    margin-bottom: 20px; 
}

創建該文件，並在它的連接處理頭似乎解決了這個問題。

來源

2016-02-18 15:49:24 Doombox

你有2 <div class="container"></div>，這兩者都偏移。刪除其中一個，看看是否解決了你的問題。

<%@ Master Language="C#" AutoEventWireup="true"%> 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <meta charset="utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 
    <title>Main master</title> 
</head> 
<body> 
    <div class="container"> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Test Demo</a> 
       </div> 
       <div class="collapse navbar-collapse" id="navbar"> 
        <ul class="nav navbar-nav"> 
         <li><a href="#">GitHub</a></li> 
         <li><a href="#">NuGet</a></li> 
         <li class="dropdown"> 
          <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Demos <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">demo</a></li> 
           <li><a href="#">demo</a></li> 
          </ul> 
         </li>      
        </ul>           
       </div> 
      </div> 
     </nav> 

     <asp:ContentPlaceHolder ID="ContentSection" runat="server"> 
     </asp:ContentPlaceHolder> 
    </div> 


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

</body> 
</html>

來源

2016-02-18 15:23:27

嘗試移動'

'周圍，無論在哪裏或有多少它似乎沒有解決問題。 – Doombox

你能說明你是如何從後面的代碼中添加jumbotron的嗎？就像你如何將HTML內容添加到「ContentSection」控件 –

我已用一些代碼更新了我的答案，可以試試看看它是否有效？ –

Bootstrap導航欄未對齊

回答

相關問題