TW Bootstrap: Comment colonnes de dépassement

Je veux avoir une rangée de colonnes vont être défilement horizontal:

Comme vous pouvez le voir, la ligne est à l'extérieur du bloc (avec un rembourrage). A l'intérieur, il y a des colonnes où chacun a quelques span* classe comme span3. Et depuis toutes les colonnes ne correspondent pas à la ligne, la barre de défilement est sur le fond.

Voici ce que j'ai essayé de faire (avec css) et pour l'instant pas de chance.

<div class="row">

<!-- the parent element which will have scrollbar -->
<div class="span12" style="white-space: nowrap; overflow-x: auto;">

<div class="row">

<div class="span3" style="display: inline-block;">content here</div>
<div class="span3" style="display: inline-block;">content here</div>
<div class="span3" style="display: inline-block;">content here</div>
...

<div>

</div>

</div>

Mais alors les colonnes juste envelopper une fois qu'ils ne peuvent pas s'insérer dans la ligne. Comment puis-je faire cela?

Merci.

InformationsquelleAutor miki725 | 2012-07-03

css twitter-bootstrap

19

Mis à jour

Je suppose que tu viens de manquer le float: none; : float forces display: block;.

Démonstration en direct (jsfiddle)
```
<div class="myClass">
    <div class="row">
        <div class="span5"></div>
        <div class="span5"></div>
        <div class="span5"></div>
    </div>
</div>
```
```
div.myClass {
    overflow-x: auto;
    white-space: nowrap;
}
div.myClass [class*="col"], /* TWBS v3 */
div.myClass [class*="span"] {  /* TWBS v2 */
    display: inline-block;
    float: none; /* Very important */
}
```
De toute façon ce n'est pas parce que vous pouvez faire ce que vous devriez. Il y a des choses comme carrousels qui peuvent réaliser ce genre d'effets.

À mon humble avis une page web est à l'origine destiné à être défile horizontalement alors que le JavaScript ne peut rien faire.
- Mal lui donner un essai. Pourquoi pre tag?
- merci. Il fonctionne parfaitement!. J'ai fait du violon avec la solution. Si tout se tient, alors pas de scollbars apparaissent, sinon scollbars s'affiche. J'ai été absent float: none qui vous l'avez souligné. jsfiddle.net/miki725/9Ndjw
- est-il possible d'avoir la barre de défilement horizontale pour répondre à l'utilisateur geste du doigt plutôt que de contrôler la barre de défilement, aussi je ne voudrais pas que la barre de défilement pour être visible
- J'ai essayé de résoudre le même problème et cela a fonctionné comme un charme...merci.
- fonctionne très bien! mis à jour avec la dernière version de bootstrap 3 (3.3.5 au moment d'écrire ces lignes): jsfiddle.net/s3logic/ou9er1n7
- Je sais que c'est un vieux de la réponse, mais je ne peux pas empêcher de se demander, pourquoi une page de faire défiler horizontalement? Si vous écrivez de base d'une page html avec pas de html ou de css, il serait défile verticalement.
InformationsquelleAutor Sherbrow

Je l'ai pris un peu plus loin. Défilement horizontal colonnes!

   div.h-scrollable {
overflow-x: auto;
white-space: nowrap; 
}
div.h-scrollable [class*="col"] {
display: inline-block;
float: none;
white-space: normal;
vertical-align: top;
}
<div class="h-scrollable container-fluid ">
<div class="row">
<div class="col-xs-1">
<label>9:00am</label>
</div>
<div class="col-xs-6">
<label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blah</label>
</div>
<div class="col-xs-6">
<label>Blah blah blah blah blah blah</label>
</div>
<div class="col-xs-6">
<label>BBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahah</label>
</div>
<div class="col-xs-6">
<label>Blah blah blah blah blah blah</label>
</div>
<div class="col-xs-6">
<label>Blah blah blah blah blah blah</label>
</div>
<div class="col-xs-6">
<label>Blah blah blah blah blah blah</label>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<label>9:00am</label>
</div>
<div class="col-xs-6">
<label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blah</label>
</div>
<div class="col-xs-6">
<label>Blah blah blah blah blah blah</label>
</div>
<div class="col-xs-6">
<label>BBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahah</label>
</div>
<div class="col-xs-6">
<label>Blah blah blah blah blah blah</label>
</div>
<div class="col-xs-6">
<label>Blah blah blah blah blah blah</label>
</div>
<div class="col-xs-6">
<label>Blah blah blah blah blah blah</label>
</div>
</div>
</div>

pouvez-vous fournir un violon? Qui aide générale, pour examen

InformationsquelleAutor philipjohnbasile

-1

Vous avez besoin de l'overflow-x sur le span3 n'est pas le span12 je pense que
- Je veux afficher davantage de contenu dans span12 alors qu'il peut s'adapter, par conséquent, le dépassement doit être là.
- désolé, je voulais dire overflow-y sur l'span3 de l'
- pourquoi auraient-ils besoin d'overflow-y?
- je ne sais pas ce que je vous parle, désolé
InformationsquelleAutor dezman

Vous devez vous connecter pour publier un commentaire.