2015-10-15 92 views
2

我需要您的幫助和建議,以及我在學習Twitter Bootstrap時遇到的問題。我正在使用來自W3Schools的確切代碼來放置可摺疊的NavBar。Twitter Bootstrap在使用IP地址時不起作用,但在「localhost」中工作

我使用Eclipse和Apache Tomcat本地服務器。

我看到兩個不同的輸出具有相同的代碼。

一些奇怪的原因,我無法上傳圖片。噹噹 「IP地址」 運行在 「localhost」(http://localhost:8080/test.html

網站運行:(

網站(http://my-ip:8080/test.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target="#myNavbar"> 
        <span class="icon-bar"></span> <span class="icon-bar"></span> <span 
         class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">WebSiteName</a> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li class="dropdown"><a class="dropdown-toggle" 
         data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Page 1-1</a></li> 
          <li><a href="#">Page 1-2</a></li> 
          <li><a href="#">Page 1-3</a></li> 
         </ul></li> 
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> 
          Sign Up</a></li> 
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 
          Login</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

    <div class="container"> 
     <h3>Collapsible Navbar</h3> 
     <p>In this example, the navigation bar is hidden on small screens 
      and replaced by a button in the top right corner (try to re-size this 
      window). 
     <p>Only when the button is clicked, the navigation bar will be 
      displayed.</p> 
    </div> 

</body> 
</html> 
+0

請發佈您正在查看的錯誤。 – leesei

+0

我無法上傳圖片@leesei ..它不允許我上傳..對不起!沒有錯誤。在本地主機上,它工作正常,但是當我用系統IP地址替換它時,導航欄即使在全屏上也會崩潰。 –

回答

相關問題