Создание группы списков с несколькими столбцами

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

Вопрос - это может быть легко исправлена ​​или, может быть, я не может добавить дополнительные div при использовании list-group? Я попытался использовать clearfix, но безуспешно. Если он не может быть исправлен, есть ли другое решение для достижения того же результата с помощью Boostrap? Я смотрел в других компонентах, но не нашел ничего другого, и, очевидно, я не хочу использовать таблицы для этого.

Answer 1

обертывание <div class="list-group col-lg-12"> с <div class="row"> и тогда работает clearfix. Все ваши теги стиля col-md должны быть в строке класса div или аналогично (также можно использовать контрольную строку). Строки также должны быть внутри контейнера. Пример здесь: http://www.bootply.com/azBEpNdMZq Больше информации здесь: http://getbootstrap.com/css/#grid