引导程序传送带无法正常工作
问题描述:
我的页面上有一个引导程序传送带,它的工作不正常。我从我的数据库中显示了6个项目,但是我只需要在第一个轮播式页面上显示3个项目,然后在下一个显示3个项目。但相反,它显示了在单个页面上折叠的所有项目。引导程序传送带无法正常工作
这里是我的代码
<div class="row">
<div class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails" data-bind="foreach: myMovies">
<li class="col-md-4">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="some image src"></a>
</div>
<div class="caption">
<h4 data-bind="text: Movies().Title"></h4>
</div>
</div>
</li>
</ul>
</div>
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
</div>
</div>
和我的CSS
img {
max-width: 100%;
}
.thumbnails li > .fff .caption {
background: #fff !important;
padding: 10px
}
ul.thumbnails {
margin-bottom: 0px;
}
.caption h4 {
color: #444;
text-align: center !important;
}
.caption p {
color: #999;
}
li {
list-style-type: none;
}
#caption-value {
background-color: lightgray !important;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
@media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
ul.thumbnails {
padding: 0;
}
哪里似乎是一个问题吗?
答
ul.thumbnails {
margin-bottom: 0px;
}
.caption h4 {
color: #444;
text-align: center !important;
}
.caption p {
color: #999;
}
li {
list-style-type: none;
}
#caption-value {
background-color: lightgray !important;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
@media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
ul.thumbnails {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<ul class="thumbnails" data-bind="foreach: myMovies">
<li class="col-md-4">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/200x50"></a>
</div>
<div class="caption">
<h4 data-bind="text: Movies().Title"></h4>
</div>
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails" data-bind="foreach: myMovies">
<li class="col-md-4">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/200x50"></a>
</div>
<div class="caption">
<h4 data-bind="text: Movies().Title"></h4>
</div>
</div>
</li>
</ul>
</div>
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
</div>
你能创建的jsfiddle演示或任何工作的例子吗? –
以及我怀疑是否有可能使JSfiddle,因为没有什么会显示,因为它从数据库中获取数据@SanjeevK – aiden87