Question

我的主页几乎完成了我的自举旋转木马。我不明白只有一个小问题。它只适用于以jumbotron为主的div。那是为什么？

如果我周围没有围栏，它就不会显示任何东西..

部分代码：

<div class="container-fluid">

    <div class=".col-md-6">

        <!-- Full Page Image Background Carousel Header -->
        <header id="myCarousel" class="carousel slide">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for Slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <!-- Set the first background image using inline CSS below. -->
                    <div class="fill" style="background-image: url('/images/hotel1.jpg');"></div>
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <!-- Set the second background image using inline CSS below. -->
                    <div class="fill" style="background-image: url('/images/hotel2.jpg');"></div>
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <!-- Set the third background image using inline CSS below. -->
                    <div class="fill" style="background-image: url('/images/hotel3.jpg');"></div>
                    <div class="carousel-caption">
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="icon-prev"></span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="icon-next"></span>
            </a>

        </header>

    </div>


</div>

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

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

<!-- Script to Activate the Carousel -->
<script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
</script>

CSS代码：

html,
body {
    height: 100%;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}



.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

footer {
    margin: 50px 0;
}

希望有人可以看到并引导我朝着正确的方向前进，因为这是我制作的第一个旋转木马。

Answer 1

问题是由多个小问题造成的：

here is my bootply link

我没有太大变化，你在标题中忘了数据：

<header id="myCarousel" class="carousel slide" data-ride="carousel">

你的旋转木马之前的div有一个错误的类：

<div class=".col-md-6"><!--it shouldn't have the dot there-->
<div class="col-md-6"><!--we both know how frustating these little dots can be-->

Bootstrap Carousel，仅适用于jumbotron

1 个答案:

here is my bootply link