带有多个项目的 Twitter Bootstrap 响应式轮播答案

【问题标题】：Twitter Bootstrap Responsive Carousel With Multiple Items带有多个项目的 Twitter Bootstrap 响应式轮播
【发布时间】：2012-09-13 03:51:49
【问题描述】：

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

【问题讨论】：

显示查看代码。您可以将图像包装在 div 中并设置其宽度。
添加了代码+查看链接。图像已经包含在<div class="thumbnail"> 中，如果我为此设置了大小，但是它不会响应并且如果它变得太小就会从屏幕上消失。可以举个例子吗？

标签： css twitter-bootstrap responsive-design

【解决方案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/

【讨论】：

当我们添加引导响应时它会破坏它：
@ÜnsalKorkmaz 引导程序本身不会在每张幻灯片上使用多个元素，因此此答案仅试图提出一个可行的解决方案，但取决于您的情况:(
到目前为止，我自己已经完成了这项工作。我一直在寻找的是一个一次滑动一个项目的滑块（而不是像这样一次滑动 4 个项目）。有人知道一个很好的例子吗？
@PavelNikolov 您可以使用jCarousel 轻松实现您想要的效果。如果您正在寻找与引导程序类似的东西，另一位用户写了一个答案，其中更改了引导程序的滑块插件，该插件具有您正在寻找的效果；你可以找到它here。
感谢您的链接 - 我目前正在使用 jCarousel。我会检查其他解决方案。

【解决方案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>

【讨论】：