创建多列列表组

Question

I wanted to create multicolumn list-group to have different number of columns in different resolutions using Bootstrap (newest version 3.2.0).

I used the following code to achieve this:

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

and it works exactly as I wanted - Bootply demo

However using such solution caused one problem. When I want to display anything later, for example:

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

it seems there is a problem with clearing floats what can be seen here: Bootply demo

Question - can it be easily fixed or maybe I cannot put extra divs when using list-group ? I tried to use clearfix but without any success. If it cannot be fixed is there any other solution to achieve the same result using Boostrap? I was looking in other components but haven't found anything other and obviously I don't want to use tables for that.

Answer 1

wrap <div class="list-group col-lg-12"> with <div class="row"> and the clearfix works then. All your col-md style tags should be in a div class row or alike (controls-row could also be used). Rows should also be inside a container. Example here: http://www.bootply.com/azBEpNdMZq More info here: http://getbootstrap.com/css/#grid