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

创建多列列表组

1 个答案: