Bootstrap - Barre De Défilement Horizontale
J'ai besoin de barre de défilement horizontale pour le code ci-dessous.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1 class="page-header">Horizontal Scroll in bootstrap</h1>
<div class="container-fluid" style="overflow-x:scroll;">
<div class="col-sm-3">
<h3>Tree 1</h3>
</div>
<div class="col-sm-3">
<h3>Tree 2</h3>
</div>
<div class="col-sm-3">
<h3>Tree 3</h3>
</div>
<div class="col-sm-3">
<h3>Tree 4</h3>
</div>
<div class="col-sm-3">
<h3>Tree 5</h3>
</div>
</div>
</body>
</html>
Si elle est exécutée au-dessus de la ligne la sortie montré que l'image. Mais j'ai besoin de l'Arbre 5 après l'Arbre 4. Pas au-dessous de l'Arbre 1. Si je l'augmentation de l'Arbre 6, il montre qu'Après l'Arbre 5. c'est à dire, j'ai besoin de barre de défilement horizontale. S'il vous plaît aider moi.
Vous devez vous connecter pour publier un commentaire.
Il pourrait être:
et puis dans votre css:
violon
Nouvelle réponse
Bâtiment sur Alex Coloma de la première réponse, mais un ptit plus claire et sans styles en ligne.
Ajoutez le code suivant à votre fichier CSS spécifique et il devrait faire l'affaire:
Que fait-il et pourquoi a-t-il?
L' .conteneur de fluide de la pièce donne le wrapper de la propriété de faire défiler horizontalement si il y a débordement du contenu et lui dit de ne PAS envelopper ("saut de ligne") l'espace entre le texte ou dans ce cas de l'enfant-éléments.
L' .col-md-3 de la partie "hacks" en Amorce de la grille-système et désactive la flotte à gauche - qui était responsable pour le saut de ligne entre les quatrième et cinquième "l'arbre".
"display: inline-block" de rendu de vos éléments dans une ligne et "vertical-align: top" en fait comme vous l'aurez deviné alignée en haut.
Problème
Ce "hack" rend le bootstrap grille assez inutile - au moins pour les 3-éléments de colonne.
Vous pouvez vouloir donner votre conteneur supplémentaire de classe ou l'ID de faire de la nouvelle CSS seule cible de cette un récipient.
par exemple:
Et puis, enfin, la ligne dans votre code devrait ressembler à ceci:
Vieille réponse
Le principal problème est que vous êtes mal comprendre le point de le bootstrap grille-système. Vous essayez d'envelopper 15 colonnes (5 x-3 col) dans une grille de 12 colonnes.
Oui, vous pouvez le faire, mais vous devez contourner le principe de base de Bootstrap qui serait un peu idiot...
Nous donnent peu de renseignements plus précis sur ce que vous voulez atteindre, ce que vous avez essayé, une démo, etc.