jquery - Bootstrap 列无法正常工作

Question

我正在尝试为单个图像滑动创建一个 Bootstrap 轮播。这是 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 列。这是 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>