javascript - Bootstrap 产品轮播溢出？

Question

我的 Bootstrap 产品轮播有问题。我遇到了一个问题，即最后一个元素在我的轮播中被推下。这里的例子 http://codepen.io/riwakawebsitedesigns/pen/Kibrk/?editors=111 http://codepen.io/riwakawebsitedesigns/full/Kibrk/

无论我有多少元素，我都希望它能够滑行。

同样在移动 View 中仅显示一个元素并滑动到下一个元素。

<div class="container" id="masterhead">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs">
<div class="column-left">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div><!-- /. Column-left -->
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="content">
<div class="module-heading">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 pull-left">
<div class="module-title">
<h3>Featured Products</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">
<div class="controls hidden-xs text-right">
<a class="left fa fa-chevron-left btn btn-default" href="#carousel-example"  data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-default" href="#carousel-example" data-slide="next"></a>
</div><!-- /. Controls -->
</div>
</div>
</div><!-- /. Module-Heading -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">

<div class="item active">
<div class="row">

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product Example</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Next Sample Product</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a></p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

</div>
</div>

<div class="item">
<div class="row">

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Grouped Product</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">

</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

</div>
</div>

</div>

</div>
</div><!-- /. Content -->
</div><!-- /. Content Columns -->
</div>
</div><!-- /. Container -->

.clear-left {
    clear: left;
}

.clear-right {
    clear: right;
}

.module-heading {
    font-size: 16px;
    text-transform: uppercase;
    font-family: "Lucida Grande","Lucida Sans Unicode",Calibri,sans-serif;
    font-weight: 700;
    margin-top: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 10px;
}

.module-title {
    background: #CCCCCC;
}

.module-title h3 {
    margin: 0;
    padding: 0;
}

.controls {
    background: #DFDFDF;
    margin: 0;
    padding: 0;
}

.col-item {
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    background: #FFF;
}

.col-item .photo img {

}

.col-item .info {
        padding: 10px;
        border-radius: 0 0 5px 5px;
        margin-top: 1px;
}

.col-item:hover .info {
        background-color: #F5F5DC;
}

.col-item .price {
        float: left;
        margin-top: 5px;
}

.col-item .price h5 {
        line-height: 20px;
        margin: 0;
}

.price-text-color {
        color: #219FD1;
}

.col-item .info .rating {
        color: #777;
}

.col-item  .rating {
        float: left;
        font-size: 17px;
        text-align: right;
        line-height: 52px;
        margin-bottom: 10px;
        height: 52px;
}

.col-item .separator {
        border-top: 1px solid #E1E1E1;
}

.col-item .separator p {
    line-height: 20px;
        margin-bottom: 0;
        margin-top: 10px;
        text-align: center;
}

.col-item .separator p i {
        margin-right: 5px;
}

.col-item .btn-add {
        width: 50%;
        float: left;
}

.col-item .btn-add {
        border-right: 1px solid #E1E1E1;
}

.col-item .btn-details {
        width: 50%;
        float: left;
        padding-left: 10px;
}

Answer 1

这取决于 .因此，您必须修改脚本以在此标记中仅添加三个元素。

试试这段代码:

<div class="container" id="masterhead">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs">
<div class="column-left">
<ul class="list-group">
<li class="list-group-item"><div class="list-heading"><h4>Categories</h4></div></li>
<li class="list-group-item">Computer Packages</li>
<li class="list-group-item">Hard Drives</li>
<li class="list-group-item">Software</li>
<li class="list-group-item">Video Cards</li>
<li class="list-group-item">Sound Cards</li>
</ul>
</div><!-- /. Column-left -->
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="content">
<div class="module-heading">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 pull-left">
<div class="module-title">
<h3>Featured Products</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">
<div class="controls hidden-xs text-right">
<a class="left fa fa-chevron-left btn btn-default" href="#carousel-example"  data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-default" href="#carousel-example" data-slide="next"></a>
</div><!-- /. Controls -->
</div>
</div>
</div><!-- /. Module-Heading -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">

<div class="item active">
<div class="row">

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product Example</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>



<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a></p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

</div>
</div>

<div class="item">
<div class="row">

  <div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Next Sample Product</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Grouped Product</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">

</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>



</div>
</div>

  <div class="item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
<a href="" class="hidden-sm">Add to cart</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
<a href="" class="hidden-sm">More details</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>

</div>

</div>
</div><!-- /. Content -->
</div><!-- /. Content Columns -->
</div>
</div><!-- /. Container -->