创建多列列表组

Question

我想使用 Bootstrap（最新版本 3.2.0）创建多列列表组以具有不同分辨率的不同列数。

我使用以下代码来实现这一点：

<div class="list-group col-lg-12">
<div class="col-xs-12">
    <div class="list-group-item list-group-item-info">
    <h2 class="list-group-item-heading">My title</h2>
    </div>
</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
  <a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>       
</div>

它完全按照我的意愿工作 - Bootply demo

但是，使用这种解决方案会导致一个问题。当我想稍后显示任何内容时，例如：

<p class="clearfix alert alert-warning text-center">
 a piece of code
</p>

清除浮动似乎有问题，可以在这里看到：Bootply demo

问题 - 使用list-group 时是否可以轻松修复或者我无法放置额外的 div？我尝试使用clearfix，但没有任何成功。如果无法修复，是否有任何其他解决方案可以使用 Boostrap 达到相同的结果？我在寻找其他组件，但没有找到其他任何东西，显然我不想为此使用表格。

Answer 1

用<div class="row"> 包裹<div class="list-group col-lg-12"> 然后clearfix 工作。 您所有的 col-md 样式标签都应该在 div 类行或类似行中（也可以使用 controls-row）。行也应该在容器内。 此处示例：http://www.bootply.com/azBEpNdMZq 更多信息在这里：http://getbootstrap.com/css/#grid