相关疑难解决方法(0)

Twitter Bootstrap 2轮播 - 一次显示一组缩略图,如jcarousel

我很感激,如果有人可以建议如何修改Twitter Bootstrap 2轮播,以便一次显示一组缩略图,类似于这个jquery插件(jcarousel)

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

谢谢

jquery jcarousel twitter-bootstrap

27
推荐指数
2
解决办法
3万
查看次数

具有多个项目的Twitter Bootstrap响应轮播

我正在尝试使用多个项目设置Twitter Bootstrap轮播,同时保持响应能力.

我有一个用于测试设置的jsfiddle http://jsfiddle.net/Va8Un/

我想要发生的是显示4个图像,每个图像都带有标题以在旋转木马窗格中保存项目标题等,并且应调整它们以适应屏幕以始终保持在同一行.现在它完全无视我做出调整图像尺寸与屏幕的任何企图,我想通设置IMG max-width:100%;会做的伎俩,但它似乎并不影响它.此外,第四个图像被推到第二行,因为图像没有调整大小:

在此输入图像描述

有什么方法可以用纯CSS来解决这个问题,还是应该寻找Twitter Bootstrap以外的选项?

你可以在这里查看结果:http://jsfiddle.net/Va8Un/embedded/result/

这是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"> …
Run Code Online (Sandbox Code Playgroud)

css responsive-design twitter-bootstrap

13
推荐指数
1
解决办法
6万
查看次数