導航欄不顯示

-1

因爲我寫了HTML/CSS已經有一段時間了。我前一段時間寫了一個網站，需要將代碼從一個註冊服務器移動到另一個（學校服務器到谷歌）。但我注意到的一點是，由JQuery引入的導航欄（導航欄）未顯示。導航欄不顯示

學校的文件系統的結構讓我以非正統的方式添加文件，也許這就是爲什麼navbar沒有被加載。這裏主要是如何設置文件系統。

index.html   # calls everything below 
css/ 
    bootstrap.css 
    styles.css 
js/ 
    bootstrap.js 
    jquery.js 
templates/ 
    header.html  # where the navigation bar exists

導航欄是標題的組件，模板放入索引頁中。所以你可以把header.html想象成一個生活在index.html中的元素。索引頁面應該能夠在導航欄中調用index頁面，但這似乎並沒有發生。

的Index.html

<!DOCTYPE html> 
<html lang="en"> 

<!-- TODO: replace ../ with root folder path--> 

<head> 
    <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="My Site" content=""> 
    <meta name="Max Gittelman" content=""> 

    <title>Max Gittelman</title> 
    <link rel="shortcut icon" href="images/index.ico" /> 

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

    <!-- Font --> 
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic' rel='stylesheet' type='text/css'> 

    <!-- Custom CSS --> 
    <link href="css/styles.css" rel="stylesheet"> 

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

</head> 

<body>  

    <div id="header"></div> 
    <div id="footer"></div> 
    <script> 
     $("#header").load("templates/header.html #header-template"); 
     $("#footer").load("templates/footer.html #footer-template"); 
    </script> 

    <!-- Page Content --> 
    <div class="container"> 

     <img src="images/me.jpg" alt="" class="my-pic center-block" /> 

     <h3 class="text-center mich">University of Michigan '17</h3> 
     <hr width="50%"> 
     <div class="text-center index-text"> 
      <p>Computer Science Engineering<br> 
      Machine Learning<br> 
      Artificial Intelligence</p> 
     </div> 
    </div> 

</body> 

</html>

Styles.css中

body { 
    margin-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ 
    font-family: 'Lato',serif; 
    color: black; 
    margin-bottom: 40px; 
} 

footer { 
    /*margin: 50px 0;*/ 
    position:fixed; 
    height: 35px; 
    background-color: #41b5f3; 
    bottom:0px; left:0px; right:0px; 
    padding-top: 8px; 
    color: white; 
    z-index: 4; 
    border-top: 1px solid black; 
} 

footer a { 
    color: white; 
} 

footer a:hover { 
    text-decoration: none; 
    color: gray; 
} 

.mich { 
    font-family: Arial; 
    font-weight: 800; 
} 

.divider { 
    width: 40%; 
} 

.index-text p { 
    font-family: Arial; 
    font-size: 120%; 
} 

.footer-text { 
    font-family: Arial; 
    font-size: 95%; 
} 

.my-pic { 
    width: 240px; 
    height: auto; 
    margin-top: 50px; 

} 

.navbar { 
    background-color: #41b5f3; 
} 

.navbar a { 
    font-size: 95%; 
} 

@media (min-width: 768px) { 
    .navbar-brand { 
     position: absolute; 
     width: 100%; 
     left: 0; 
     text-align: center; 
     margin:0 auto; 
    }  

    .navbar-brand a { 
     padding-left: 35px; 
    } 
} 


.navbar-inverse .navbar-nav li a { 
    color: white; 
    text-align: center; 
} 

.navbar-inverse .navbar-brand a { 
    color: white; 
    text-align: center; 
} 

.navbar-inverse .navbar-brand a:hover { 
    color: #f0f341; 
    text-decoration: none; 
} 

.navbar-inverse .navbar-nav li:hover { 
    background-color: #415cf3; 
    border-radius: 4px; 
} 

.navbar-inverse .navbar-nav li a:hover { 
    color: #f0f341; 
} 

.dropdown-menu { 
    background-color: #41b5f3; 
} 

.dropdown-menu a:hover { 
    color: #41b5f3; 
} 

.about { 
    width: 70%; 
    margin: auto; 
    max-width: 700px; 
} 

.about_pic { 
    margin: 0px auto 30px auto; 
    text-align: center; 
} 

.about_pic img { 
    width: 25%; 
    min-width: 250px; 
    max-width: 400px; 
    height: auto; 
    border: 10px solid black; 
} 

@media (max-width: 550px) { 
    .about p { 
     font-size: 13px; 
    } 
} 

@media (min-width: 551px) { 
    .about p { 
     font-size: 15px; 
    } 
} 

.contact-top-text { 
    text-align: center; 
    margin-top: 100px; 
} 

.contact-top-text p { 
    font-size: 20px; 
} 

.submit-btn { 
    background-color: #41b5f3; 
} 

.submit-btn:hover { 
    background-color: #415cf3; 
    color: #f0f341; 
    border-color: #415cf3; 
} 

form { 
    text-align: center; 
} 

.cap { 
    margin: auto; 
} 

.g-recaptcha { 
    margin: 10px; 
    display: inline-block; 
} 

.recaptcha-form .btn { 
    background-color: #41b5f3; 
} 

input#email { 
    border-width: 0.25px; 
    border-color: #eeeeee; 
} 

input#name { 
    border-width: 0.25px; 
    border-color: #eeeeee; 
} 

input { 
    border-width: 0.25px; 
    border-color: #eeeeee; 
} 


.mtn_div { 
    border: 1px dashed red; 
} 

.mtn_div a { 
    padding-right: 0px; 
} 

.navbar-nav li a:nth-child(4) { 
    padding: 0px; 
    text-align: center; 
} 

.mtn { 
    border: 1px solid red; 
    height: 40px; 
    width: auto; 
} 

h1, h2, h3, h4, h5, h6, p { 
    font-family: Arial; 
} 

.col-md-5 { 
    vertical-align: center; 
} 

.img-responsive { 
    margin: auto; 
    height: 250px; 
    width: auto; 
    margin-top: 25px; 
    display: inline-block; 
} 

.portfolio-container .col-md-7 { 
    text-align: center; 
} 

.portfolio-container .row { 
    width: 100%; 
} 

.review-one { 
    height: 100px; 
    width: auto; 
    border: 1px dotted black; 
} 

.review-two { 
    margin-top: 25px; 
} 

.gif { 
    display: inline-block; 
    margin: 15px; 
    height: 102px; 
    width: auto; 
    text-align: center; 
} 

.bellman-container { 
    text-align: center; 
} 

.bellman { 
    vertical-align: center; 
    width: 80%; 
    height: auto; 
} 

.tsp img { 
    margin-top: 0px; 
    height: 250px; 
    width: auto; 
    z-index: 1; 
} 

.anon { 
    height: 160px; 
    width: auto; 
    display: inline; 
} 

.ship-text { 
    margin-top: 10px; 
} 

.log-text { 
    margin-top: 25px; 
} 

.fsm-text { 
    margin-top: 20px; 
} 

.pipeline-text { 
    margin-top: 20px; 
} 

.kili-body { 
    background-color: #8daadc; 
} 

.kili-container { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    max-width: 100%; 
    max-height: 100%; 
    margin: 52px auto 35px auto; 
} 

.kili-container img { 
    position: absolute; 
    max-height: 100%; 
    max-width: 100%; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    z-index: -1; 
} 

.kili-words { 
    color: white; 
    position: absolute; 
    margin: 0px auto 0px auto; 
    min-height: 8em; 
    width: 60%; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

.kili-words p { 
    font-family: Arial; 
    font-size: 14px; 
} 

.form-control { 
    margin: auto; 
    width: 30%; 
    max-width: 400px; 
    min-width: 300px; 
} 

.success-container { 
    text-align: center; 
} 

.success-container h1 { 
    color: #00274c; 
} 

.success-pic { 
    margin-top: 20px; 
    width: 75%; 
    height: auto; 
}

頁眉（導航欄在哪裏生活）

<nav class="navbar navbar-inverse navbar-fixed-top" id="header-template"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <div class="navbar-brand"><a href="index.html">Max Gittelman</a></div> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a href="about.html">About</a></li> 
     <li><a href="portfolio.html">Portfolio</a></li> 
     <li><a href="contact.html">Contact</a></li> 
     <li><a href="kili.html">Kilimanjaro</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>

，如果你看看在repository它可能會更清楚基於佈局。

來源

2017-10-12 Max

您需要在此處發佈代碼的最小示例，而不是明天可以改變或消失的github：[mcve] – Rob

查看您的瀏覽器的* Network *控制檯。如果您的CSS文件有404響應，那麼您確實使用了錯誤的位置 – Phil

@Max您在瀏覽器控制檯中是否出現錯誤？ – Shiladitya

雖然我會改變路徑絕對從根與相對於頁面（<link href="/css/styles.css" rel="stylesheet" />，而不是）...這段代碼對我來說工作正常，並加載了CSS。

此外，對於舊版本的HTML，您希望type='text/css'包含在該鏈接中。

來源

2017-10-12 01:08:34

我還沒有得到任何boostrap導航欄？ – Max

鏈接標記不使用或需要結束斜線。此外，新網頁不應該使用「舊版HTML」。該類型不是必需的。 – Rob

您需要在CSS鏈接中關閉>之前添加一個/右鍵。同樣如上所述，您可能需要添加type =「text/css」

來源

2017-10-12 01:16:24

導航欄不顯示

回答

相關問題