Question

我正在尝试为单张图像滑动创建一个自举轮播。这是example，这正是我需要的。

我的问题是，我想在bootstrap列中显示缩略图。在这种情况下，它是6列。

所以我尝试了类似的东西 -

<div class="container">
    <div class="col-sm-12">
        <div class="carousel slide" id="myCarousel">
          <div class="carousel-inner">
                <div class="item active">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">3</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">4</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">5</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">6</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">7</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">8</a></div>
                </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
    </div>
</div>

问题是它只显示3列。这是代码为sofar的DEMO。

有人能告诉我代码中的问题是什么吗？谢谢。

Answer 1

您的代码没问题，您需要6 sm-2 col

    <div class="container">
<div class="col-sm-12">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div>
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div>
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">3</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">4</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">5</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">6</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">7</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">8</a>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
</div>

Bootstrap列无法正常工作

1 个答案: