Thumbnail Carousel duvidas

bom dia, peguei um codigo na web, free, com Thumbnail Carousel, mas ele só fica em verticalmente, queria  que ele ficasse na horizontal, as pelo que eu vi tinha que substituir o span12 por col-md-12 e o span3 por col-md-3, mas mesmo assim não funfa. alguém poderia me ajudar a resolver esse problema.

<div class="container">
	<div class="row">
 <div class="span12">
 <div class="well">
 <div id="myCarousel" class="carousel slide">

 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>

 <!-- Carousel items -->
 <div class="carousel-inner">

 <div class="item active">
 <div class="row-fluid">
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 </div><!--/row-fluid-->
 </div><!--/item-->

 <div class="item">
 <div class="row-fluid">
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 </div><!--/row-fluid-->
 </div><!--/item-->

 <div class="item">
 <div class="row-fluid">
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
 </div><!--/row-fluid-->
 </div><!--/item-->

 </div><!--/carousel-inner-->

 <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
 </div><!--/myCarousel-->

 </div><!--/well-->
 </div>
	</div>
</div>

/ Removes the default 20px margin and creates some padding space for the indicators and controls /

.carousel {
 margin-bottom: 0;
	padding: 0 40px 30px 40px;
}

/ Reposition the controls slightly /

.carousel-control {
	left: -12px;
}

.carousel-control.right {

	right: -12px;
}

/ Changes the position of the indicators /

.carousel-indicators {
	right: 50%;
	top: auto;
	bottom: 0px;
	margin-right: -19px;
}

/ Changes the colour of the indicators /
.carousel-indicators li {

	background: #c0c0c0;
}

.carousel-indicators .active {

background: #333333;
}

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

	tentei de varias formas não deu certo. alguém saber de algum modelo, parecido com imagens.