html - Bootstrap Carousel ，仅适用于超大屏幕

Question

我几乎完成了主页的 bootstrap 轮播。只有一个小问题我不明白。它只能在以 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

我没有做太多改变，你忘记了标题中的 data-ride:

<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-->