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

Question

我正在尝试使用多个项目设置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">
               ...
          </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>

Answer 1

您可以单独使用引导流体网格,只需指定一个.container-fluid容器和.row-fluid一行,并为每个列表项目提供一个.span*类,在这种情况下为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>

演示:http://jsfiddle.net/Va8Un/10/

编辑:这是带有更正的演示 http://jsfiddle.net/Va8Un/550/