list - style - Bootstrap 3 Multicolumna dentro de una sola ul que no flota correctamente
listas bootstrap 4 (3)
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?
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í.
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>
estás pensando demasiado ... Echa un vistazo a esto [creo que esto es lo que querías, si no me lo dices]
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>