您好我使用Bootstrap 3创建Carousel,并在其中添加4个图像。 当我调整浏览器大小时,图像是堆栈。 我希望在移动模式下调整大小时只显示2个图像,或者最适合。
这是我的代码:
... <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="row"> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> </div> </div> </div> ...这是调整大小时的屏幕截图:
如何解决? 谢谢
Hello I create Carousel using Bootstrap 3, and I add 4 images inside it. When I resize browser, the images are stack. I want show just 2 images when resize it in mobile mode, or whatever the best fit.
Here is my code :
... <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="row"> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> </div> </div> </div> ...Here is my screenshot when resize it :
How to fix that? Thank you
最满意答案
不幸的是,这不适用于bootstrap。 如果将hidden-xs放在旋转木马上,它们将从旋转木马中排除。
这是一个jQuery插件,可以提供帮助: http : //owlgraphic.com/owlcarousel/index.html
This is unfortunately not possible with bootstrap. If you put hidden-xs on carousel items, they will be excluded from the carousel.
Here is a jQuery plugin that will help out: http://owlgraphic.com/owlcarousel/index.html
更多推荐
发布评论