title: How to use multiple columns in a list-group-item of a Bootstrap accordion?
body: <p>How does one use columns in the list items that expand out when an accordion is opened in Bootstrap (3)?  I am trying to keep it simple, and just use the grid classes in list-group-items as divs, as in using the <code>col-sm-3</code> class.</p>
  
  <p>Here is a <a href="http://www.bootply.com/8RgrrXBy1h" rel="nofollow">bootply</a>.</p>
  
  <p>Excerpted, the accordion list-group-items look like this:</p>
  
  <pre><code>&lt;div id="One" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-One"&gt;
      &lt;div class="list-group"&gt;
                   &lt;a class="list-group-item col-sm-3" href="#"&gt;a&lt;/a&gt;
                  &lt;div class="list-group-item col-sm-3"&gt;b&lt;/div&gt;
                  &lt;div class="list-group-item col-sm-3"&gt;c&lt;/div&gt;
                  &lt;div class="list-group-item col-sm-3"&gt;d&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The trouble is that when the accordions open, they don't get their height sized properly, and bleed into each other.  I've tried adding a clearfix div under each list-group, but there are some weird artifacts with the first list-group-item border then.</p>