使用ul li标签使用bootstrap进行css水平滚动

时间:2012-12-16 23:56:48

标签: css css3 twitter-bootstrap scrollbar horizontal-scrolling

我正在尝试使用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;
}

我想我已经做了它应该做的事情?

2 个答案:

答案 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

之前

;

一样