Twitter Bootstrap Carousel中的Div显示在彼此之上

时间:2014-07-09 15:40:22

标签: twitter-bootstrap-3 carousel

我的Twitter Bootstrat Carousel存在问题。应该一个接一个地出现的4个DIV元素一起出现在彼此之上。

我遵循了CreativityTuts.org教程,无法看到我错在哪里......

以下是HTML代码:

<html>


<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $('.carousel').carousel({
                interval:2000
            });
        });
    </script>
</head>


<body>
    <div class="container">
        <div class="row">
            <div class="span6 well">
                <div id="myCarousel" class="carousel">
                    <div class="carousel-inner">
                        <center>
                        <div class="item active"><img src="bkk.png"></div>
                        <div class="item"><img src="brr.png"></div>
                        <div class="item"><img src="buu.png"></div>
                        <div class="item"><img src="btt.png"></div>
                        </center>
                    </div>
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                </div>
            </div>
        </div>
    </div>

    <script src="js/carousel.js"></script>
</body>


</html>

我的文件结构如下:

- bkk.png (and the 3 other images)
- css (file)
- fonts (file)
- js (file)
    - carousel.js
    - bootstrap.js
    - bootstrap.min.js
- testcarousel.html

有人可以帮忙吗?

提前多多感谢,

1 个答案:

答案 0 :(得分:0)

好的伙计们, 感谢您的回答,它让我意识到我使用了Bootstrap 2的代码,但实际上使用的是Bootstrap 3。

我在这里找到了所需的语法: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php