编辑:当我点击左侧或右侧图标时,它只会激发我到页面底部。我想这是因为#truespeed。当我有一个独立的轮播页面时,这非常有效。但是当我尝试将它与我正在设计的网站一起添加时,它就会走下坡路。
编辑#2:我刚刚重新确认旋转木马编码器是否在独立页面上工作,而且确实如此。我检查了所有外部页面链接,它们工作正常。我真的很茫然。
这是我的静态页面(用于导航栏,页眉和页脚):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index,follow">
<title>{{var pageTitle}}</title>
<link rel="icon" type="image/png" href="{{var protoHost}}FavIconsuperawesome32.png">
<link rel="icon" type="image/x-icon" href="{{var protoHost}}favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{var protoHost}}css/main.css">
<link rel="stylesheet" href="{{var protoHost}}css/print.css">
<link rel="stylesheet" href="{{var protoHost}}css/navbar-custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
{{var extraHeaders}}
</head>
<body>
<div class="page">
<div class="container-fluid">
<div class="col-xs-10 col-sm-3 branding">
<a class="imgCon" href="{{var protoHost}}">
<img alt="superawesome Internet Services" src="{{var protoHost}}img/SuperAwesomeInternet.png">
</a>
</div>
<div class="container-fluid">
<div class="brandingspacer">
<a class="inlineParagraph socialspacer" href="https://www.facebook.com/superawesomeInternetService"><i class="fa fa-facebook-square fa-2x" style="color:#3B5998"></i></a>
</div>
<div class="col-xs-0">
<a class="inlineParagraph socialspacer" href="https://twitter.com/superawesomecanada"><i class="fa fa-twitter fa-2x" style="color:#1da1f2"></i></a>
</div>
<div class="col-xs-0">
<a class="inlineParagraph socialspacer" href="https://www.instagram.com/superawesomeinternet/"><i class="fa fa-instagram fa-2x" style="color:#623628"></i></a>
</div>
<div class="col-xs-0">
<a class="inlineParagraph socialspacer" href="https://www.youtube.com/channel/UC_EH7RNVnL7IUch12iHzFAQ"><i class="fa fa-youtube-play fa-2x" style="color:#E62B24"></i></a>
</div>
<div class="col-xs-0">
<a class="inlineParagraph socialspacer" href="https://plus.google.com/116264661972220598755"><i class="fa fa-google-plus-square fa-2x" style="color:#DB4437"></i></a>
</div>
<div class="col-xs-0">
<p class="socialmediaspacer headerspacer inlineParagraph"><i class="fa fa-phone fa-lg"></i><a href="tel:613-865-7733" style="color: black"> 613-865-7733</a></p>
<p class="headercontact headerspacer inlineParagraph"><i class="fa fa-envelope fa-lg"><a href="mailto:info@superawesome.ca" style="color: black"></i> info@superawesome.ca</a></p>
</div>
<div class="inlineParagraph buttonspacer">
<button type="button" class="btn btn-primary">My Account</button>
</div>
</div>
</div>
<nav class="navbar navbar-custom">
<div class="visible-xs-block visible-sm-block visible-md-block">
<button id="btnToggleNavMenu" type="button" name="button"><i class="fa fa-bars"></i></button>
</div>
<div class="col-xs-0 container-fluid" data-expand="false">
<p class="inlineParagraph navbartext"><a href="/internet" color="white"><i class="fa fa-cloud-download navIcon fa-lg"></i>View Our Internet Packages!</a></p>
<p class="inlineParagraph navbarspacer"><a href="#"><i class="fa fa-users navIcon fa-lg"></i>Test Services</a></p>
<p class="inlineParagraph navbarspacer"><a href="/contact"><i class="fa fa-comment navIcon fa-lg"></i>Contact Us!</a></p>
</div>
</nav>
<div class="container">
<div class="Location inlineParagraph printHide">
<form>
Please enter your postal code to check for availability:
<input type="text" name="locationcheck">
</form>
</div>
<div class="smallspacer"></div>
{{var content}}
</div>
<footer class="footer">
<div class="container">
<div class="row">
<a class="col-xs-6 col-md-2"href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
<a class="col-xs-6 col-md-2"href="{{var protoHost}}TermsOfService">Terms Of Service</a>
<a class="col-xs-6 col-md-2"href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
<a class="col-xs-6 col-md-2"href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty & Returns Policy</a>
<a class="col-xs-6 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
<a class="col-xs-6 col-md-2"href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
</div> <br>
<div class="col-xs-12">
<p>© 2016 superawesome Internet Services - All Rights Reserved</p>
</div>
</div>
</footer>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{var protoHost}}js/navCode.js"></script>
{{var extraScripts}}
</body>
</html>
当我将我的轮播代码添加到我的主页时,会弹出所有的Glyph图标,以及底部的圆圈。但它们根本都不起作用。
我的主页代码:
<?php
$this->setExtraHeader('<link rel="stylesheet" href="{{var protoHost}}css/home.css">');
$this->setExtraHeader('<meta name="description" content="superawesome is a brockville Internet and Phone provider for your needs. Let\'s get connected!">');
?>
<div class="contactspacer"></div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="superawesomeslider" class="carousel slide" data-ride="carousel">
<!-- indicators dot nov -->
<ol class="carousel-indicators">
<li data-target="#superawesomeslider" data-slide-to="0" class="active"></li>
<li data-target="#superawesomeslider" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/Internet.jpg" alt="Internet Services" />
<div class="carousel-caption">
<h1>superawesome Internet Services</h1>
</div>
</div>
<div class="item">
<img src="img/Phone.jpg" alt="superawesome Internet Services" />
<div class="carousel-caption">
<h1>Phone</h1>
</div>
</div>
</div>
<!-- Controls or next and prev buttons -->
<a class="left carousel-control" href="#superawesomeslider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#superawesomeslider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
有关于发生了什么的任何想法?
答案 0 :(得分:0)
我找到了答案!它在我的bootstrap.min.js链接中。
它是:
<script src="js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
但是当你在本地链接时,完整性和交叉信息会搞砸,所以我删除了它们,而BAM!它有效。
好哇!