css défilement horizontal avec bootstrap à l'aide ul li tags

Je suis en train de défilement horizontale à l'aide de bootstrap, mais je ne suis pas en mesure de l'obtenir pour faire défiler horizontalement. Mon li balises ne pas envelopper la façon dont il devrait (c'est d'habillage normalement).

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

Je pense que j'ai fait ce que son supposé?

OriginalL'auteur hellomello | 2012-12-16

  1. 14

    Dans le Bootstrap 2 vous devez remplacer certains span* style.

    La ul élément a pour obtenir ce css:

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

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

    Voici un travail de démonstration.

    Assurez-vous que votre CSS est chargé après le bootstrap CSS.

    EDIT: Nom, il Bootstrap 2, dans le Bootstrap 3, vous aurez probablement besoin de remplacer span avec col-... ou quelque chose de similaire.

    C'est génial. Résolu un problème que j'avais. Voté et merci!
    Sweet! Merci beaucoup!
    Idk, dans votre démonstration, j'utilise: <li class="toto"></> , puis dans le CSS que j'écris .toto {...} , il travail juste, Idk pourquoi li[class*="span"] est nécessaire ici? btw, je suis en essais sur bootstrap 3. jsfiddle.net/truongnm/xsgjumuj
    la question était de résoudre un Twitter Bootstrap problème. Donc, en utilisant la col-...-classes. Votre réponse a le bon code, mais ne comportent pas de classes de Bootstrap.

    OriginalL'auteur adriaan

  2. 1

    Sur la ligne white-space:nowrap; !important dans .bsuggest la !important doit être avant le ;

    Comme white-space:nowrap !important;

    zut, je pensais que cela allait résoudre mon problème, mais le problème persiste..

    OriginalL'auteur dev