Question

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

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

我想要发生的是显示4个图像，每个图像都带有标题，以便在旋转木马窗格中保存项目标题等，并且应调整它们以适应屏幕以始终保持在同一行。现在它完全忽略了我为调整图像大小到屏幕所做的任何尝试，我认为设置img max-width:100%;会做到这一点，但它似乎没有影响它。此外，第四个图像被推到第二行，因为图像没有调整大小：

enter image description here

用纯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）。

＆＃13;

.container {
  margin-top: 10px;
}

img
{
  max-width:100%;   
}

＆＃13;

<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>

＆＃13;

演示：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>

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

2 个答案: