- 首页
- 前端开发
- 带有多个项目的 Twitter Bootstrap 响应式轮播
带有多个项目的 Twitter Bootstrap 响应式轮播
[英] Twitter Bootstrap Responsive Carousel With Multiple Items
本文介绍了带有多个项目的 Twitter Bootstrap 响应式轮播的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用多个项目设置 Twitter Bootstrap 轮播，同时保持响应能力.
我有一个用于测试设置的 jsfiddle
这是 HTML:
<div class="carousel slide" id="myCarousel"><div class="carousel-inner"><div class="item active"><ul class="thumbnails span12"><li><div class="caption"><h5>标题</h5>
<div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<li><div class="caption"><h5>标题</h5>
<div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<li><div class="caption"><h5>标题</h5>
<div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<li><div class="caption"><h5>标题</h5>
<div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="item">...
<div class="item">...
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a><a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</diV>
解决方案
你可以单独使用引导流体网格来做到这一点，只需指定一个 .container-fluid 容器和一个 .row-fluid 行，并为每个包含图像的列表项指定一个 .span* 类，在本例中为 3 (3*4=12).
.container {边距顶部:10px；}图片{最大宽度:100%；}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script><link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/><div class="container-fluid"><div class="row-fluid"><div class="carousel slide" id="myCarousel"><div class="carousel-inner"><div class="item active"><ul class="缩略图"><div class="caption"><h5>标题</h5>
<div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="caption"><h5>标题</h5><div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="caption"><h5>标题</h5><div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="item"><ul class="缩略图">
<div class="caption"><h5>标题</h5><div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="caption"><h5>标题</h5><div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="caption"><h5>标题</h5><div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="caption"><h5>标题</h5><div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="item"><ul class="缩略图">
<div class="caption"><h5>标题</h5><div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="caption"><h5>标题</h5><div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="caption"><h5>标题</h5><div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<div class="caption"><h5>标题</h5><div class="缩略图"><img src="http://placehold.it/260x180" alt="">
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a><a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
演示:http://jsfiddle.net/Va8Un/10/
这是带有更正的演示http://jsfiddle.net/Va8Un/550/
I'm trying to setup Twitter Bootstrap carousel with multiple items while maintaining the responsiveness.
I have a jsfiddle for testing setup http://jsfiddle.net/Va8Un/
What I would like to happen is to display 4 images each with caption to hold item titles and so forth within a carousel pane and they should be resized to fit the screen to stay on the same row at all times. Right now it's completely ignoring any attempts I make to adjust the image size to the screen, I figured setting the img max-width:100%; would do the trick but it doesn't seem to effect it. Moreover, the 4th image is being pushed to a second row because the images aren't resizing:
Any way to fix this with pure CSS or should I look for options beyond Twitter Bootstrap?
You can view the result here: http://jsfiddle.net/Va8Un/embedded/result/
Here is the HTML:
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails span12">
<li>
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li>
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li>
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li>
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
...
</div>
<div class="item">
...
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
</diV>
解决方案
You can do this with the bootstrap fluid grid alone, just specify a .container-fluid container along with a .row-fluid row and give each one of your list items housing an image a .span* class, in this case 3 (3*4=12).
.container {
margin-top: 10px;
}
img
{
max-width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
</div>
</div>
Demo: http://jsfiddle.net/Va8Un/10/
EDIT: here is the demo with corrections
http://jsfiddle.net/Va8Un/550/
这篇关于带有多个项目的 Twitter Bootstrap 响应式轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
