Question

在Bootstrap 3中是否有任何方法可以制作一个我可以有不同面板旋转木马的行，而通过面板我指的是带有文字，图片和按钮的盒子，例如9个面板在旋转木马的每个步骤中显示3个？

Answer 1

你可以单独使用bootstrap流体网格，只需指定一个.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

以下是Bootstrap Carousel的完整工作演示，其中包含javascript事件和选项 http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Carousel.php

Answer 3

嗯，你可以尝试这个，我从未尝试过3但是我检查了网站

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

你可以轻松地将所有项目放在<div class="item active">内，然后关闭它，然后打开另一个div等等......一定要尝试只用小图片才能得到这个想法...... 我曾经对之前的Bootstrap做同样的事情，所以我相信它会起作用：）

如何在bootstrap 3中构建一个面板轮播

3 个答案: