jquery - Bootstrap 3.1.1 缩略图 slider

Question

我使用这段代码，但它在我的网站上制作了一个垂直图像滚动条。我该如何改变它以使其水平？我从 http://www.bootply.com 中获取了这段代码.

<div class="container">
    <div class="col-md-12">
         <h1>Bootstrap 3.1.1 Thumbnail Slider</h1>

        <div class="well-none">
            <div id="myCarousel" class="carousel slide">

                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-sm-3 col-xs-6">
                              <div><div>Header</div><div>Subheader</div></div>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                            <div class="col-sm-3 col-xs-6"><a href="#x col-xs-6" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                </div>
                <!--/carousel-inner--> 
                <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-4"></i></a>

                <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-4"></i></a>
            </div>
            <!--/myCarousel-->
        </div>
        <!--/well-->
    </div>
</div>



$(document).ready(function() {
    $('#myCarousel').carousel({
    interval: 0
    })

    $('#myCarousel').on('slid.bs.carousel', function() {
        //alert("slid");
    });


});

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  border-radius: 0;
  border: none;
  background-color: none;
}

.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: .5;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: none;
}
.carousel-control.left {
    background-image: none;
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: none;
}

.carousel-control {
  padding-top:10.25%;
  width:5%;
}

Answer 1

我这样盯着看了很久，才终于意识到，如果两个相同的程序产生两个不同的结果，那么一定有不同的外部依赖。果然，示例是从MaxCDN Bootstrap 3.2.0中拉取的.将您的 Bootstrap 样式表链接更改为此，网格标记实际上如 Bootply 示例中所示工作。

我最初拉入了 the jQuery-UI bootstrap css .我想您在 Bootstrap 源中也有类似的差异。

我想链接一个 fiddle ，但你已经有了那个代码。