引導程序導航未與內容對齊

爲什麼內容與使用Bootstrap 3.0.0的品牌不一致？我怎樣才能讓這些對齊？引導程序導航未與內容對齊

enter image description here

這裏是我的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title</title> 
     <meta name="viewport" content="width=device-width initial-scale=1.0"> 
     <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
     <link href="css/app.css" rel="stylesheet"> 
    </head> 
    <body> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <span class="navbar-brand">Brand</span> 
       </div> 
      </div> 
     </div> 
     <div id="main-region" class="container"> 
      <p>Content</p> 
     </div> 

     <script data-main="js/main" src="bower_components/requirejs/require.js"></script> 
     <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>  
    </body> 
</html>

這裏是app.css：

body { 
    padding-top: 60px; 
}

來源

2013-08-30 Erik

將無法幫助更多沒有一個活生生的例子。 –

你navbar DIV需要嵌套container DIV爲它與其他內容一致。

看看這個例子：http://getbootstrap.com/examples/jumbotron/

它使用此源...

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> <!-- You need this DIV for alignment --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <form class="navbar-form navbar-right"> 
      <div class="form-group"> 
       <input type="text" placeholder="Email" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <input type="password" placeholder="Password" class="form-control"> 
      </div> 
      <button type="submit" class="btn btn-success">Sign in</button> 
      </form> 
     </div><!--/.navbar-collapse --> 
     </div> 
    </div> 

    <div class="container"> 
     <!-- Main content goes here --> 
    </div> 
</body>

來源

2013-08-30 19:20:10

謝謝 - 雖然我沒有完全使用你的例子，但它引導我去修復。使用我發佈的HTML，通過交換div.navbar-inner與div.container我得到了對齊。 – Erik

引導程序導航未與內容對齊

回答

相關問題