Question

我使用了以下代码，this是我得到的奇怪输出。可以看出，没有文字是可见的，导航器是垂直堆叠的

<div class="carousel slide" id="testimonials" data-ride="carousel">
                            <ol="carousel-indicators">
                                <li data-target="#testimonials" data-slide-to="0" class="active"></li>
                                <li data-target="#testimonials" data-slide-to="1"></li>
                                <li data-target="#testimonials" data-slide-to="2"></li>
                                <li data-target="#testimonials" data-slide-to="3"></li>
                                <li data-target="#testimonials" data-slide-to="4"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <div class="carousel-caption">
                                        <h3>Testimonial</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="carousel-caption">
                                        <h3>Testimonial</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="carousel-caption">
                                        <h3>Testimonial</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="carousel-caption">
                                        <h3>Testimonial</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="carousel-caption">
                                        <h3>Testimonial</h3>
                                    </div>
                                </div>
                            </div>
                            <a class="left carousel-control" href="#testimonials" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#testimonials" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>

有人可以帮我解决这个问题......

Answer 1

你的HTML有点格式错误（你在评论中注意到这一点，因为我正在输入我的答案，哈哈......）。你在哪里：

<ol="carousel-indicators">

实际应该是：

<ol class="carousel-indicators">

此外，默认情况下，我认为除了每个轮播项目中的标题之外，您还需要（具有定义的大小） - 它可以是图像或其他元素。 Bootstrap轮播似乎依赖于内容的大小来适当调整旋转木马的大小，这意味着如果你没有内容，那么任何东西都不会出现，因为高度将变为0.所以，对于每个项目都是这样的：

<div class="item">
    <!-- Something goes here. Could be an img, div, etc. -->
    <div class="carousel-caption">
        <h3>Testimonial</h3>
    </div>
</div>

这是一个updated example on Bootply。注意最后一个轮播元素如何没有内容（给它一个高度为0），导致标题被隐藏并且错误地放置箭头。

希望这有帮助！如果您有任何问题，请告诉我。

编辑：或者，如果您实际上没有要放入的任何内容，则可以在轮播项目上指定min-height。所以，这样的事情会起作用：

.carousel-inner .item{
    min-height:400px;
}

这是使用其他样式的Bootply example。

Bootstrap 3旋转木马不会工作

1 个答案: