Bootstrap 3.1.1缩略图滑块

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拉。将引导样式表链接更改为此，并且网格标记实际上如Bootply示例中所示。

我原本是拉the jQuery-UI bootstrap css。我想你在Bootstrap源文件中有类似的区别。

我会链接一个小提琴，但你已经得到了代码。