Navbar不显示

时间：2017-10-12 00:56:28

标签： jquery html css twitter-bootstrap

因为我写了HTML / CSS已经有一段时间了。我不久前写了一个网站，我需要将代码从一个注册商转移到另一个（学校服务器到谷歌）。但我注意到的一件事是由JQuery引入的导航栏（导航栏）没有显示。

学校文件系统的结构让我以非正统的方式添加文件，也许这就是为什么导航栏根本没有被加载。这主要是文件系统的设置方式。

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，可能会更清楚。

2 个答案:

答案 0 :(得分：2)

虽然我会将路径从根目录改为相对于页面的绝对路径（import csv import pandas as pd file1 = 'C:\\Users\\User\\Documents\\Ubiome csv Kit #\\107-078-414.csv' file2 = 'C:\\Users\\User\\Documents\\Ubiome csv Kit #\\109-080-426.csv' reader1 = csv.reader(open(file1)) reader2 = csv.reader(open(file2)) reader1 = csv.reader(open(file1)) reader2 = csv.reader(open(file2)) 代替）...这段代码对我来说很好，并且加载了css。

此外，对于旧版本的HTML，您需要在所述链接中包含ObjectReader objectReader = mock(ObjectReader.class); 。

答案 1 :(得分：1)

您需要在结束前添加/右＆gt;在CSS链接中。同样如上所述，您可能需要添加type =＆＃34; text / css＆＃34;

相关问题
最新问题