title: Bootstrap horizontal stacking of list-group
body: <p>How can I make this look as a horizontal one line/row list seperated as vertical columns (instead of a set of rows with one column, as below) 
  <a href="http://getbootstrap.com/components/#list-group-basic">http://getbootstrap.com/components/#list-group-basic</a></p>
  
  <pre><code>&lt;ul class="list-group"&gt;
    &lt;li class="list-group-item"&gt;Cras justo odio&lt;/li&gt;
    &lt;li class="list-group-item"&gt;Dapibus ac facilisis in&lt;/li&gt;
    &lt;li class="list-group-item"&gt;Morbi leo risus&lt;/li&gt;
    &lt;li class="list-group-item"&gt;Porta ac consectetur ac&lt;/li&gt;
    &lt;li class="list-group-item"&gt;Vestibulum at eros&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Does it make sense to make use of <a href="http://getbootstrap.com/components/#with-button-elements">http://getbootstrap.com/components/#with-button-elements</a> in this case? Or should <a href="http://getbootstrap.com/components/#nav-disabled-links">http://getbootstrap.com/components/#nav-disabled-links</a> be used instead? I need the border seperation similar to list-group/list-group-item. </p>