瞭解如何讓Bootstrap導航工作與額外的內容

因此，我想用Bootstrap 3.3.2做一些基本的原型設計，似乎有一些技術變化。我能夠使頂部和底部導航欄正確顯示，但當我使用其他任何東西時，中間的內容不會顯示正確。瞭解如何讓Bootstrap導航工作與額外的內容

這是可用的代碼。

<!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.0"> 
    <title>Company Home Page</title> 
    <link id="bootstrapTheme" href="http://netdna.bootstrapcdn.com/bootswatch/3.3.2/cerulean/bootstrap.min.css" rel="stylesheet"> 
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="container-fluid"> 
    <!-- Header --> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
     <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> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
      </div> 
     </div> 
     </div> 
     <!-- Main component for a primary marketing message or call to action --> 
     <div class="jumbotron"> 
     <p>Some text</p> 
     </div> 
     <!-- Header --> 
     <div class="container"> 
     <div class="navbar navbar-inverse navbar-fixed-bottom"> 
      <div class="navbar-inner navbar-content-center"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script> 
    </body> 
</html>

以下是我想要的代碼，但似乎不起作用。中間的內容似乎最終在導航欄後面的頁面頂部。

<!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.0"> 
    <title>Company Home Page</title> 
    <link id="bootstrapTheme" href="http://netdna.bootstrapcdn.com/bootswatch/3.3.2/cerulean/bootstrap.min.css" rel="stylesheet"> 
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="container-fluid"> 
    <!-- Header --> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
     <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> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
      </div> 
     </div> 
     </div> 
     <!-- Main component for a primary marketing message or call to action --> 
     <div class="container"> 
     <p>Some text</p> 
     </div> 
     <!-- Header --> 
     <div class="container"> 
     <div class="navbar navbar-inverse navbar-fixed-bottom"> 
      <div class="navbar-inner navbar-content-center"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script> 
    </body> 
</html>

唯一真正的變化是用容器類替換jumbotron類。

任何幫助解決這將不勝感激。

問候，理查德

來源

2015-02-07 Richard O

我想通了。看來我需要把我的中間部分包裹在另一箇中。

來源

2015-02-08 10:19:00

瞭解如何讓Bootstrap導航工作與額外的內容

回答

相關問題