list - style - Bootstrap 3 Multicolumna dentro de una sola ul que no flota correctamente

listas bootstrap 4

Question

He estado encontrando problemas como este en el actual 3 de arranque desde hace un tiempo. He logrado arreglarlos en el pasado de una manera u otra, pero no tengo ni idea de cómo solucionarlo esta vez.

Necesito crear dos columnas de una ul alternando elementos de la lista pull-left y pull-right . ¿Qué estoy haciendo mal?

http://bootply.com/92446

Answer 1

Debería intentar usar la plantilla de cuadrícula .

Esto es lo que he usado para un Diseño de dos columnas de 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>

Esto funcionó para mí.

Answer 2

Gracias, Varun Rathore . ¡Funciona perfectamente!

Para aquellos que desean un elegante colapso de 4 artículos por fila a 2 artículos por fila, según el ancho de la pantalla :

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

Answer 3

estás pensando demasiado ... Echa un vistazo a esto [creo que esto es lo que querías, si no me lo dices]

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>