Как сделать Bootstrap Collapse горизонтально?

Question

Мне нужно использовать функцию развала на Bootstrap горизонтально. Вот что я могу сделать [jsfiddle] [1]. Но я должен установить высоту фиксации, так что теперь он работает как-то. Но мне нужно, чтобы он был отзывчивым. Ширина панели должна быть на 100% основанной на родительской ширине.

[1]: http://jsfiddle.net/g7m2x65z/ 

Answer 1

Во-первых, вам необходимо перестроить и переименовать некоторые из ваших элементов div. У вас есть два идентичных идентификатора (id = «аккордеон»), первый внутри второго. Вы должны изменить идентификатор первого «аккордеона», а затем отделить его от второго «аккордеона» div (добавить закрывающий div и открывающий div перед элементом с классом = «panel-group»).
ВАЖНО: Не меняйте имя второго «аккордеона», потому что это родительский элемент, в котором открываются динамические элементы!

Во-вторых, настроить CSS-файл:

1. добавьте следующие строки, чтобы соответствовать вашему аккордеон на странице: `#accordion {ширина: 90vh;}` и `.panel {ширина: 100%; } `;
2. добавить медиа-запросы для настройки `.cont {width: ...}`, `.cont {margin-left: ...}` (и/или `.cont {margin-right: ...}` `) и `.panel-body {width: ...}`, чтобы соответствовать различным размерам видовых экранов.

Полный jsfiddle можно найти here.

HTML:

<div> 
<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
       <div class="cont">Text</div> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a 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"> 
       <div class="cont">Text</div> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a 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"> 
       <div class="cont">Text</div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS-свойства для изменения/установки:

#accordion {width:85vh;} 
.panel {width:100%;} 
.panel-title a { 
    ... 
    padding: 10px 0px; 
    margin: -10px 0px; 
} 
.panel-body { 
    height:300px; 
} 
.cont { 
    width: 45%; 
    margin-left:400px; 
    ... 
} 

ПРИМЕЧАНИЯ:

Вы контролировать высоту вашего аккордеона с: `.panel {ширина : ...} `и` #accordion {width: ...} `. Ширина скользящих панелей контролируется `.panel-body {width: ...}`, а вертикальное позиционирование текста в скользящей панели управляется `.cont {margin-left: ...}` или ` .cont {margin-right: ...} `