Как сделать двухстоечный аккордеон в Bootstrap 3?

Question

Я попробовал обернуть половину панелей в col-sm-6. Он успешно рассекает аккордеон на две колонки, но разваливается функциональность. Они больше не рушится.

Любые идеи о том, как правильно это сделать в Bootstrap 3?

Here - код, с которым я работаю. Обратите внимание, что они не автоколлапсы при нажатии на другой заголовок.

Answer 1

Во-первых, причина, по которой ваш пример (http://bootply.com/84122) будет нарушен. В вашем примере оберните ваш div.panel в div.col-xs-6. Плагин не позволяет эту упаковку. Div.panel должны быть прямыми детьми вашего аккордеона Div #. Если отношение будет определено data-parent="#accordion".

Вышеприведенное следует из строки collapse.js 51: var actives = this.$parent && this.$parent.find('> .panel > .in'). На данный момент я не думаю, что это ошибка, потому что это строгое вложение позволяет встраивать панели без проблем. Если вы замените эту строку на var actives = this.$parent && this.$parent.find(' .panel > .in') (удалите> до .panel), ваш пример будет работать хорошо. (решение 1).

В моих комментариях я предложил использовать это: http://bootply.com/83750. Это будет работать без изменений в javascript, потому что классы col-x-x добавляются в div.panel вместо их переноса. Вы упоминаете проблемы, такие как странное смещение, вы можете предотвратить это, добавив clearfix (<div class="clearfix hidden-xs"></div>) после каждой второй панели. В вашем случае вы можете оставить hidden-xs, потому что вы используете классы col-xs-6 (никогда не рушитесь).

без коллапса сетки:

<div class="container"> 
<div class="panel-group" id="accordion"> 
    <div class="panel panel-default col-xs-6"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-xs-6"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
<div class="clearfix"></div> 
    <div class="panel panel-default col-xs-6"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
      Collapsible Group Item #3 
     </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-xs-6"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> 
      Collapsible Group Item #4 
     </a> 
     </h4> 
    </div> 
    <div id="collapseFour" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
</div>  
</div>