Question

我不确定为什么我的内容几乎完全消失，导航栏仍然完好无损，但它不会打开，导航栏中的文字不会居中，段落不是＆＃39响应，我的订阅按钮没有对齐。我非常沮丧，而且我已经在这个网站上工作了几个星期。有人可以帮我这个。这是该网站的链接：http://bit.ly/1kPKVzR提前致谢。这是网站中其中一个页面的代码...

<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="description" content="...">
    <meta name="author" content="...">

    <title>...</title>
    <link rel="icon" href="images/favicon.png" type="image/x-icon" />
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/full.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="css/customstyle.css" rel="stylesheet">    
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<style type="text/css">

::-moz-selection { 
    color:#fff;
    background-color:rgba(128, 128, 128, 0.3); 
}
::selection { 
    color:#fff;
    background-color:rgba(128, 128, 128, 0.3); 
}

.navbar  {
    color:#000000;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.0);
    border-color: rgba(255, 255, 255, 0.0);
}
.logo{
    display:inline-block;
    position: absolute;
    left:40%;
    font-size: 20px;

    font: 80px "munich", Sans-serf, Ariel;
    margin-top: 60px;
}

.logo a:focus, .logo a:hover{
    -webkit-transition:1s;
    color:#999999;
        text-decoration: none;
}
.logo li a:focus, .logo li a:hover{
    -webkit-transition:1s;
    color:#000000;
}
@font-face{
    font-family:"munich";
    src:url("munich.ttf") format("truetype");
}

.starter-template img{
    width:450px;
    height:450px;
    margin: 40px 100px auto;
}
audio{
   width:200px;
 }

.starter-template .pull-right{
position:absolute;

}

.starter-template img{
    width:450px;
    height:450px;
    margin:20px 100px auto;
}

#albumlinks{    

    margin-top:440px;
    margin-right: -40em; 

}
#signup{
    position: absolute; right: -5000px;
}
#mc_embed_signup{
  background:none; font:14px Helvetica,Arial,sans-serif;  margin:500px;padding:0;
}


/**************** @media screen ********************/

@media screen and (min-width: 480px) {


    #albumlinks .clear-fix .pull-right{
    width:5em;
    height:4em;
  }
 }
.navbar-default{
        background-color: rgba(245, 245, 245,  0.1);

}
 .navbar-nav{
  margin-top: -20px;
 }

</style>
</head>
<body>        
<div class="logo">
    <p><a href="index.html">...</a></p>
    </div>
      <!-- Navigation -->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                </div>

               <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav">
                       <li>
                            <a href="#">Bio</a>
                        </li>
                        <li>
                            <a href="#">Lessons</a>
                        </li>
                        <li>
                            <a href="#">Shows</a>
                        </li>
                        <li>
                            <a href="#">Music</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
      <div class="clearfix">
    <div class="container">
          <div class="pull-left">
          <img src="../images/piano-1599x1066.jpg"/>
    </div>



    <p class="lead pull-right ">...</p> 



        </div>

    </div>

        <footer class="navbar-fixed-bottom ">
        <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
                  <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
                <div class="navbar-text pull-right">
                <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>
                <a href="#" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
                <a href="#" target="_blank"><i class="fa fa-soundcloud fa-2x"></i></a>
                </div>

                <p class="pull-right">...</p>
                </div>
                </div>
    </footer>


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

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

    </body>

Answer 1

Jquery和Bootstrap .js文件没有正确链接。

脚本运行后，将css添加到.navbar-toggle .icon-bar和导航栏。

Answer 2

如果您使用的是Chrome，请转到您的站点并按Ctrl + Shift + I，否则请右键单击并选择inspect元素。这样做会启动开发工具，最重要的是控制台。

在那里我们可以看到有关JQuery没有被加载的错误。您可以将以下内容添加到您网站的部分，将其添加到您的网站中。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

或者修改指向jQuery的链接 - http://ericarodriguez.me/jarodkashkin/js/jquery.js 如果单击该链接，您将看到该文件不存在

Answer 3

有一个错误表示＆＃34; Uncaught Error：Bootstrap的JavaScript需要jQuery 1.9.1或更高版本＆＃34;

因此您需要更改加载到较新版本的JQuery。你的地方说

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

将其更改为

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

我的内容完全消失了

3 个答案: