web-dev-qa-db-fra.com

Bootstrap 3 Multi-colonnes dans un seul ul ne flottant pas correctement

Cela fait quelque temps que je rencontre des problèmes comme celui-ci sur le bootstrap 3 actuel). J'ai déjà réussi à les résoudre d'une manière ou d'une autre, mais je ne sais pas comment le résoudre. temps.

Je dois créer deux colonnes sur un ul en alternant un pull-left & pull-right sur les éléments de la liste. Qu'est-ce que je fais mal?

http://bootply.com/92446

listcss-floattwitter-bootstrap-3multiple-columns
43
davidetucci

Vous devriez essayer d'utiliser le Modèle de grille .

Voici ce que j'ai utilisé pour la disposition en deux colonnes d'un <ul>

<ul class="list-group row">
     <li class="list-group-item col-xs-6">Row1</li>
     <li class="list-group-item col-xs-6">Row2</li>
     <li class="list-group-item col-xs-6">Row3</li>
     <li class="list-group-item col-xs-6">Row4</li>
     <li class="list-group-item col-xs-6">Row5</li>
</ul>

Cela a fonctionné pour moi.

145
Varun Rathore

Merci, Varun Rathore. Ça fonctionne parfaitement!

Pour ceux qui souhaitent une réduction progressive de 4 éléments par ligne à 2 éléments par ligne, en fonction de la largeur de l'écran :

<ul class="list-group row">
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_1</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_2</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_3</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_4</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_5</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_6</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_7</li>
</ul>
11
Dmitriy

vous pensez trop ... Jetez un coup d'oeil à ceci [je pense que c'est ce que vous vouliez - sinon, laissez-moi savoir]

http://www.bootply.com/118886

css

.even{background: red; color:white;}
.odd{background: darkred; color:white;}

html

<div class="container">
  <ul class="list-unstyled">
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
  </ul>
</div>
8
Omar