css horizontal scrolling with bootstrap using ul li tags

Question

I'm trying to horizontal scroll using bootstrap, but I'm not able to get it to scroll horizontally. My li tags just doesn't wrap the way it should (it's wrapping normally).

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;
}

I think I've done what its supposed to?

Answer 1

In Bootstrap 2 you have to overwrite some span* styling.

The ul element has to get this css:

ul.your-horizontal-list {
    white-space: nowrap;
    overflow-x: auto;
}

ul.your-horizontal-list li[class*="span"] {
    display: inline-block;
    float: none;
}

Here is an working demo.

Make sure that your CSS is loaded after the bootstrap CSS.

EDIT: Name it Bootstrap 2, in Bootstrap 3 you probably need to replace span with col-... or something similar.

Answer 2

On the line white-space:nowrap; !important in .bsuggest the !important needs to be before the ;

Like so white-space:nowrap !important;