Bootstrap 3单个ul内的多列不能正确浮动

现在我已经在当前的bootstrap 3上遇到这样的问题了。 我已经设法以某种方式修复它们，但是这次没有办法解决这个问题。

我需要通过在列表项上交替pull-left pull-right来创build两个列。 我究竟做错了什么？

http://bootply.com/92446

Answer 1

你应该尝试使用网格模板 。

以下是我用于<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> 

这对我有效。

Answer 2

你在想太多…看看这个[我认为这是你想要的 – 如果不让我知道]

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> 

Answer 3

谢谢， Varun Rathore 。 它完美的作品！

对于那些想要从每行4个项目到每行2个项目的优雅折叠，取决于屏幕宽度 ：

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