我有多种产品我想制作这些产品Carousel在bootstrap响应，每次5行10列显示50个产品，当我点击下一个然后显示另外50个产品我有无限产品但显示ata时间50产品与转盘
html code it have 2 rows and 4 columns make it 5 rows and 10 columns
<div class="container">
<div class="col-xs-12">
<div class="page-header">
<h3>Bootstrap 3.3.0</h3>
<p>Responsive Moving Box Carousel Demo</p>
</div>
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide1 -->
<div class="item">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide2 -->
<div class="item">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide3 -->
</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>
<!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.col-xs-12 -->
</div><!-- /.container -->
CSS代码
/ * Global * /
img { max-width:100%; }
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE7 */
opacity: 0.6;
text-decoration: none;
}
.thumbnails li> .fff .caption {
background:#fff !important;
padding:10px
}
/* Page Header */
.page-header {
background: #f9f9f9;
margin: -30px -40px 40px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #999;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #000;
}
ul.thumbnails {
margin-bottom: 0px;
}
/* Thumbnail Box */
.caption h4 {
color: #444;
}
.caption p {
color: #999;
}
/* Carousel Control */
.control-box {
text-align: right;
width: 100%;
}
.carousel-control{
background: #666;
border: 0px;
border-radius: 0px;
display: inline-block;
font-size: 34px;
font-weight: 200;
line-height: 18px;
opacity: 0.5;
padding: 4px 10px 0px;
position: static;
height: 30px;
width: 15px;
}
/* Mobile Only */
@media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
@media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
li { list-style-type:none;}
::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }
答案 0 :(得分：0)
您必须将Bootstrap重新设计为自己的标准。您必须col-sm-10 = col-sm-12表示col-sm-10 = 100%，然后col-sm-2表示20%。我试着做你的工作。可能会帮助您解决问题。
<html>
<head>
<style>
@media (min-width: 768px){
.col-sm-2 {
width: 20.00000%;
}}
@media (min-width: 768px){
.col-sm-10 {
width: 100.000%;
}}
@media (min-width: 768px){
.col-sm-10, .col-sm-2, .col-sm-6{
float: left;
}}
.col-sm-2, .col-sm-10, .col-sm-6{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
display: block;
}
.col-sm-6 {
width: 50%;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
</div>
</body>
</html>
在here
中查看此内容