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

Question

我已经在当前的bootstrap 3上遇到了这样的问题一段时间了.我已经成功地以某种方式解决了这些问题,但是这次不知道如何修复它们.

我需要ul通过交替使用pull-left&pull-right列表项来创建一列中的两列.我究竟做错了什么？

http://bootply.com/92446

Answer 1

您应该尝试使用网格模板.

这是我用于a的两列布局的内容 <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

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

Answer 3

你想的太多了......看看这个[我想这就是你想要的 - 如果不让我知道的话]

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>