css - 带有多个项目的 Twitter Bootstrap 响应式轮播

Question

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

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

我想要发生的是在轮播窗格中显示 4 个带有标题的图像，每个图像都带有标题以保存项目标题等，并且应该调整它们的大小以适应屏幕以始终保持在同一行上。现在它完全忽略了我为调整屏幕图像大小所做的任何尝试，我认为设置 imgmax-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">‹&lt;/a>
        <a data-slide="next" href="#myCarousel" class="right carousel-control">›&lt;/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">‹&lt;/a>
      <a data-slide="next" href="#myCarousel" class="right carousel-control">›&lt;/a>
    </div>
  </div>
</div>

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

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

Answer 2

我使用 Twitter Bootstrap 做到了这一点：

<!-- Images Thumbnails -->
<div style="position:absolute;top:430px;height:115px;width:350px;margin:10px 0 0 10px;">
    <p style="margin:0;">Images</p>                     
    <!-- Product Images Carousel -->
    <div id="ImagesCarousel" class="carousel slide">
          <!-- carousel items -->
          <div class="carousel-inner">
                <div class="active item">
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>    
                </div>
                <div class="item">
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                </div>
                <div class="item">
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                </div>
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#ImagesCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#ImagesCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

'ryan_thumbnail_carousel_productimages.html' 是：

<div class="thumbnail" style="float:left;margin:10px 15px 0 0;width:70px;height:70px; position:relative;"></div>