如何在引导程序 3 中构建面板轮播

Question

在 Bootstrap 3 中有什么方法可以让我有一个不同面板的轮播，我所说的面板是指带有文本、图片和按钮的框，例如 9 个面板在轮播的每个步骤中显示 3 个?

Answer 1

您可以单独使用引导流体网格来执行此操作，只需指定一个 .container-fluid 容器和一个 .row-fluid 行，并为包含图像的每个列表项指定一个 .span* 类，在这种情况下3 (3*4=12)。

HTML

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

Answer 2

你可以试试这个，我没试过 3 但我查了网站

 <div class="item active">
  <img src="..." alt="...">
  <div class="carousel-caption">
    ...
  </div>
</div>

您可以轻松地将您想要的所有项目放入<div class="item active">，然后关闭它，然后打开另一个 div 等等...确保仅尝试使用小图片来了解想法... 我曾经对以前的 Bootstrap 做过同样的事情，所以我相信它会起作用 :)