我正在尝试使用bootstrap和css重新创建netflix水平滑块/轮播:http://media.idownloadblog.com/wp-content/uploads/2013/08/Netflix-My-List-web-screenshot-002.jpg
我还没有设置css过渡/动画,但我已经获得了重复的元素,而不使用宽度黑客进行回流。我计划使用javascript重复元素,并使容器的宽度只与内部元素一样宽。这是我的代码:http://jsfiddle.net/MgcDU/7541/
HTML
<div class="container">
<div class="row">
<div class="col-xs-2 hero-unit">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
</div>
<div class="hero-unit col-xs-2">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
</div>
<div class="hero-unit col-xs-2">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
</div>
<div class="hero-unit col-xs-2">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
</div>
<div class="hero-unit col-xs-2">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
</div>
<div class="hero-unit col-xs-2">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
</div>
</div>
</diV>
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container{
height: 150px;
background: grey;
width: 500%
}
.hero-unit {
display:inline-block;
background-color:red;
height: 100px;
}
这是一个超级的方法吗?我在网络开发方面不是很有经验。