html - 创建多列列表组

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>

清除 float 似乎有问题，可以在这里看到:Bootply demo

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

Answer 1

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