0
我正在使用html5boilerplate和Twitter Bootstrap轉換一些psd文件。現在我的問題很簡單。Bootstrap 3傳送帶未加載/正確顯示
我想將容器分成兩半，因此我可以在一側加載旋轉木馬，在另一側加載一些文字，我知道如何分割它，但是當我加載旋轉木馬時，我只有這個
。現在我知道，我已經看到，它是關於jQuery沒有正確加載，但一切正在加載，我只能看到錯誤在哪裏。
有人可以檢查我的index.html，並說明我這張圖片有什麼問題。 謝謝。
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fotn-awesome.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="#" height=30 width=41></a>
</div>
<div class="navbar-collapse collapse">
<ul id="navbar" class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Apartments</a></li>
<li><a href="#">About</a></li>
<li style="padding-top: 8px;"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container text-center">
<h1>Hello, NYC!</h1>
<p>Place to put NYC Bay picture!</p>
</div>
</div>
<div class="container">
<!-- JOIN SOCIETE section -->
<div class="row">
<div class="col-xs-12 text-center">
<h2><span class="glyphicon glyphicon-stop"></span> JOIN SOCIETE</h2>
<p>Literati Group Hosing LLC provides furnished housing for the</p>
<p>New York City international community of students, interns,</p>
<p>and young professionals.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- container devider -->
<p style="padding: 30px;"></p>
</div>
</div>
<div class="container">
<!-- SOCIETE row of columns -->
<div class="row">
<div class="col-xs-12 col-sm-3 col-sm-offset-2">
<h4><strong>No Broker or Hidden Fees</strong></h4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-sm-3">
<h4><strong>Extremely Fast.</strong></h4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-sm-3">
<h4><strong>Flexible Lease Terms</strong></h4>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
<hr>
<div class="row">
<div class=" col-xs-12 col-sm-3 col-sm-offset-2">
<h4><strong>Operations and Engeneering.</strong></h4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-sm-3">
<h4><strong>Networking.</strong></h4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-sm-3">
<h4><strong>Safety.</strong></h4>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
<div class="container">
<div class="row">
<!-- container devider -->
<p style="padding: 30px;"></p>
</div>
</div>
<div class="container">
<div class="row">
<!--Carousel Best Appartments Section-->
<div id="carousel-example-generic" class="carousel slide col-sm-6" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div><!-- end row -->
</div><!-- end carousel container -->
<hr />
<footer>
<p>© Company 2015</p>
</footer>
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
這並沒有解決問題。 – PetarP
滑塊正在爲我工作，通過刪除腳本標籤，並重新添加它們在http://codepen.io/jfoutch/pen/dYEpEJ抱歉，只是重新閱讀帖子..滑塊工作，但佈局是錯誤的 – jfoutch
由於某種原因我在你的codepen中看到了同樣的錯誤，傳送帶沒有加載，因爲我看到它，使用火狐 – PetarP