来自Bootstrap的旋转木马不会显示我的图像或对控件做出反应.
这是我的HTML:
Skates R Us
我的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>
其次,您需要为旋转木马提供一个起点,因此旋转木马指示器项目和旋转木马内部项目必须具有一个active
类别.像这样:
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<!-- Other Items -->
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1500/600?image=1" alt="Slide 1" />
</div>
<!-- Other Items -->
</div>