我正在尝试使用bootstrap进行水平滚动,但我无法让它水平滚动。我的li
标签不会以它应该的方式包裹(它正常包装)。
HTML:
<div class="container suggest">
<ul class="thumbnails bsuggest" >
<li class="span2">
text goes here
</li>
</ul>
</div>
CSS:
.bsuggest
{
overflow-x:scroll;
overflow-y:hidden;
height:250px;
white-space:nowrap; !important
width:100%;
}
.bsuggest li
{
float:left;
display:inline-block;
*dsplay:inline;/* For IE7*/
*zoom:1;/* For IE7*/
white-space:normal;
}
.suggest
{
width:100%;
position:relative;
margin-top:95px;
}
我想我已经做了它应该做的事情?
答案 0 :(得分:14)
在Bootstrap 2 中,您必须覆盖一些span*
样式。
ul
元素必须得到这个css:
ul.your-horizontal-list {
white-space: nowrap;
overflow-x: auto;
}
ul.your-horizontal-list li[class*="span"] {
display: inline-block;
float: none;
}
这是working demo。
确保在引导CSS之后加载CSS。
编辑:将其命名为Bootstrap 2,在Bootstrap 3中,您可能需要将span
替换为col-...
或类似内容。
答案 1 :(得分:1)
在white-space:nowrap; !important
的{{1}}行.bsuggest
需要在!important
像;