web-dev-qa-db-fra.com

Les div à défilement horizontal se trouvent dans une bootstrap rangée)

J'essaie de créer une ligne horizontale défilable bootstrap. La ligne contient les commentaires des clients entourés de div. La largeur de chaque témoignage est de 33.333%.

white-space: nowrap et display: inline-block ne fonctionne pas.

Qu'est-ce que je fais mal?

<div class="row">
    <div class="col-lg-12 text-center">
        <div class="section-title">
           <div class="testimonial_group">
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               ...
           </div>
        </div>
    </div>
</div>
htmlcsslisttwitter-bootstrap-3scrollable
23
Codehan25

Vérifiez s'il vous plaît. Est-ce ce que vous voulez réaliser?

horizontal scrolling

CodePen • JSFiddle

/* The heart of the matter */
.testimonial-group > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.testimonial-group > .row > .col-xs-4 {
  display: inline-block;
  float: none;
}

/* Decorations */
.col-xs-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-xs-4:nth-child(3n+1) { background: #c69; }
.col-xs-4:nth-child(3n+2) { background: #9c6; }
.col-xs-4:nth-child(3n+3) { background: #69c; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container testimonial-group">
  <div class="row text-center">
    <div class="col-xs-4">1</div><!--
 --><div class="col-xs-4">2</div><!--
 --><div class="col-xs-4">3</div><!--
 --><div class="col-xs-4">4</div><!--
 --><div class="col-xs-4">5</div><!--
 --><div class="col-xs-4">6</div><!--
 --><div class="col-xs-4">7</div><!--
 --><div class="col-xs-4">8</div><!--
 --><div class="col-xs-4">9</div>
  </div>
</div>
61
Gleb Kemarsky

Dans Bootstrap 4, vous devrez ajouter

flex-wrap: nowrap;

à

.testimonial-group > .row

en plus de la réponse de Gleb

14
Martin K.

Essaye ça:

section-title {
  width: 100%; 
  overflow-x: scroll(or auto);
}

Regardez la spécification ici .

3
Vally Pepyako

mettre ces lignes dans votre fichier CSS

.section-title {
  overflow: scroll;
  overflow-x: scroll;
  overflow-y:hidden
}

le x est pour horizontal et y est pour vertical, appliquez le code de classe dans le div parent dans lequel plusieurs div sont imbriqués.

1
Abhinash Majhi