这是我的HTML：
<!DOCTYPE HTML><HTML> <head> <Title>Skates R Us</Title> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <link rel="stylesheet" href="CSS/bootstrap.min.CSS"> <link rel="stylesheet" href="CSS/global.CSS"> </head> <body> <div role="navigation"> <div > <div > <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span >Toggle navigation</span> <span ></span> <span ></span> <span ></span> </button> <a href="#" > Skates R Us </a> </div> <div > <ul > <li > <a href="index.HTML">Home</a> </li> <li> <a href="contact.HTML">Contact / About</a> </li> <li> <a href="shop.HTML">Shop</a> </li> <li> <a href="new.HTML">New Products</a> </li> <li> <a href="media.HTML">Media</a> </li> </ul> </div> </div> </div> <div ID="carousel" data-rIDe="carousel"> <ol > <li data-target="carousel" data-slIDe-to="0"></li> <li data-target="carousel" data-slIDe-to="1"></li> <li data-target="carousel" data-slIDe-to="2"></li> </ol> <div > <div > <img src="img/slIDe_1.png" alt="SlIDe 1"> </div> <div > <img src="img/slIDe_2.png" alt="SlIDe 2"> </div> <div > <img src="img/slIDe_3.png" alt="SlIDe 3"> </div> </div> <a href="#carousel" data-slIDe="prev"> <span ></span> </a> <a href="#carousel" data-slIDe="next"> <span ></span> </a> </div> <script src="http://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.10.2/jquery.min.Js"></script> <script src="Js/bootstrap.min.Js"></script> <script> $("#carousel").carousel(); </script> </body></HTML> 我的CSS：
#carousel { margin-top: 50px;}.carousel { height: 500px; margin-bottom: 60px;}/* Since positioning the image,we need to help out the caption */.carousel-caption { z-index: 10;}/* Declare heights because of positioning of img element */.carousel .item { wIDth: 100%; height: 500px; background-color: #777;}.carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-wIDth: 100%; height: 500px;}@media (min-wIDth: 768px) { .carousel-caption p { margin-bottom: 20px; Font-size: 21px; line-height: 1.4; }}img { background: red;} Chrome控制台中没有错误,代码与bootstrap示例中的错误完全相同.
这是网站在我看来的样子：
解决方法 这里只有两件小事.第一个是以下转盘指标列表项：
<li data-target="carousel" data-slIDe-to="0"></li>
您需要将data-target属性传递给选择器,这意味着ID必须以#为前缀.所以把它们改成如下：
<li data-target="#carousel" data-slIDe-to="0"></li>
其次,您需要给旋转木马一个起点,以便轮播指示物品和轮播内部物品必须有一个活动类.喜欢这个：
<ol > <li data-target="#carousel" data-slIDe-to="0" ></li> <!-- Other Items --></ol><div > <div > <img src="http://lorempixel.com/1500/600/abstract/1" alt="SlIDe 1" /> </div> <!-- Other Items --></div>
Working Demo in Fiddle
总结以上是内存溢出为你收集整理的html – Bootstrap 3旋转木马不工作全部内容，希望文章能够帮你解决html – Bootstrap 3旋转木马不工作所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）