2017-06-18 53 views
-1

我已經使用Bootstrap navbars五年了。這是我第一次無法完成工作。我甚至從Bootstrap網站複製了html,我無法在任何瀏覽器或Dreamweaver中使用它。我一直在尋找兩天的解決方案,無法找到任何地方。我無法獲得Bootstrap 3.3.7 navbar-fixed-top上班

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>Fixed Top Navbar Example for Bootstrap</title> 

    <!-- Bootstrap core CSS --> 
    <link href="/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="/css/navbar-fixed-top.css" rel="stylesheet"> 

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="/js/ie-emulation-modes-warning.js"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 

    <body> 

    <!-- Fixed navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <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"> 
      <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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" 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> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="../navbar/">Default</a></li> 
      <li><a href="../navbar-static-top/">Static top</a></li> 
      <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="container"> 

     <!-- Main component for a primary marketing message or call to action --> 
     <div class="jumbotron"> 
     <h1>Navbar example</h1> 
     <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
     <p>To see the difference between static and fixed top navbars, just scroll.</p> 
     <p> 
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a> 
     </p> 
     </div> 

    </div> <!-- /container --> 


    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="/js/jquery.min.js"><\/script>')</script> 
    <script src="/js/bootstrap.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="/js/ie10-viewport-bug-workaround.js"></script> 
    </body> 
</html> 
+0

我一直在尋找您嘗試的代碼樣本,並不能找到一個在任何地方 – gavgrif

+0

能否請你添加代碼示例。 – sushant047

+2

https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_navbar_fixed&stacked=h ...檢查此 –

回答

1

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<body style="height:1500px"> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
    
 
<div class="container" style="margin-top:50px"> 
 
    <h3>Fixed Navbar</h3> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p> 
 
     <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>  
 
    </div> 
 
    <div class="col-md-4"> 
 
     <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p> 
 
     <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<h1>Scroll this page to see the effect</h1> 
 
</body>

1

W3 documentation應該工作。

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_fixed&stacked=v

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>