轮播指示器不可点击
我有以下问题，当我尝试点击它们不会改变的指标时我无法点击，就像代码没有任何效果一样。
.blog .carousel-indicators li {
background: #708198;
border-radius: 50%;
width: 8px;
height: 8px;
}
.blog .carousel-indicators .active {
background: #0fc9af;
}
.item-carousel-blog-block {
outline: medium none;
padding: 15px;
}
.item-box-blog {
border: 1px solid #dadada;
text-align: center;
z-index: 4;
padding: 20px;
}
.item-box-blog-image {
position: relative;
}
.item-box-blog-image figure img {
width: 100%;
height: auto;
}
.item-box-blog-date {
position: absolute;
z-index: 5;
padding: 4px 20px;
top: -20px;
right: 8px;
background-color: #41cb52;
}
.item-box-blog-date span {
color: #fff;
display: block;
text-align: center;
line-height: 1.2;
}
.item-box-blog-date span.mon {
font-size: 18px;
}
.item-box-blog-date span.day {
font-size: 16px;
}
.item-box-blog-body {
padding: 10px;
}
.item-heading-blog a h5 {
margin: 0;
line-height: 1;
text-decoration:none;
transition: color 0.3s;
}
.item-box-blog-heading a {
text-decoration: none;
}
.item-box-blog-data p {
font-size: 13px;
}
.item-box-blog-data p i {
font-size: 12px;
}
.item-box-blog-text {
max-height: 100px;
overflow: hidden;
}
.mt-10 {
float: left;
margin-top: -10px;
padding-top: 10px;
}
.btn.bg-blue-ui.white.read {
cursor: pointer;
padding: 4px 20px;
float: left;
margin-top: 10px;
}
.btn.bg-blue-ui.white.read:hover {
box-shadow: 0px 5px 15px inset #4d5f77;
}<div class="container cta-100 ">
<div class="container">
<div class="row blog">
<div class="col-md-12">
<div id="blogCarousel" class="carousel slide container-blog" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
<li data-target="#blogCarousel" data-slide-to="1"></li>
</ol>
<center><h4 class="title text-uppercase fw-normal mb-4">Latest <span class="text-primary fw-bold">News</span> </h4></center>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4" >
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
当我点击小圆圈时什么也没有发生..就像如果代码没有任何效果，它的大部分都是用引导程序制作的
1 个答案:
答案 0 :(得分：0)
您缺少 bootsnipp.com/snippets/BxA1B 中的 jQuery 和 Bootstrap JS：
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
.blog .carousel-indicators li {
background: #708198;
border-radius: 50%;
width: 8px;
height: 8px;
}
.blog .carousel-indicators .active {
background: #0fc9af;
}
.item-carousel-blog-block {
outline: medium none;
padding: 15px;
}
.item-box-blog {
border: 1px solid #dadada;
text-align: center;
z-index: 4;
padding: 20px;
}
.item-box-blog-image {
position: relative;
}
.item-box-blog-image figure img {
width: 100%;
height: auto;
}
.item-box-blog-date {
position: absolute;
z-index: 5;
padding: 4px 20px;
top: -20px;
right: 8px;
background-color: #41cb52;
}
.item-box-blog-date span {
color: #fff;
display: block;
text-align: center;
line-height: 1.2;
}
.item-box-blog-date span.mon {
font-size: 18px;
}
.item-box-blog-date span.day {
font-size: 16px;
}
.item-box-blog-body {
padding: 10px;
}
.item-heading-blog a h5 {
margin: 0;
line-height: 1;
text-decoration: none;
transition: color 0.3s;
}
.item-box-blog-heading a {
text-decoration: none;
}
.item-box-blog-data p {
font-size: 13px;
}
.item-box-blog-data p i {
font-size: 12px;
}
.item-box-blog-text {
max-height: 100px;
overflow: hidden;
}
.mt-10 {
float: left;
margin-top: -10px;
padding-top: 10px;
}
.btn.bg-blue-ui.white.read {
cursor: pointer;
padding: 4px 20px;
float: left;
margin-top: 10px;
}
.btn.bg-blue-ui.white.read:hover {
box-shadow: 0px 5px 15px inset #4d5f77;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container cta-100 ">
<div class="container">
<div class="row blog">
<div class="col-md-12">
<div id="blogCarousel" class="carousel slide container-blog" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
<li data-target="#blogCarousel" data-slide-to="1"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="carousel-item ">
<div class="row">
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
</div>
<!--.carousel-inner-->
</div>
<!--.Carousel-->
</div>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？