我想创建一个多列列表组,使用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演示
然而,使用这样的解决方案会导致一个问题。当我后来想要显示任何东西时,例如:
<p class="clearfix alert alert-warning text-center">
a piece of code
</p>
看起来清除浮动存在问题,可以在这里看到:Bootply演示
问题 - 是否可以轻松解决或者使用list-group
时不能添加额外的div?我尝试使用clearfix
,但没有成功。如果无法修复,是否有其他解决方案可使用Boostrap实现相同结果?我在其他组件中查找,但未发现其他内容,显然我不想使用表格。
body { overflow-x: hidden;}
添加到你的 CSS 中将解决这个问题 - http://www.bootply.com/BV7NpHyw1e - trees_are_great