부트 스트랩을 수평으로 접는 방법?

Question

부트 스트랩에서 가로로 붕괴 기능을 사용해야합니다. 여기서 내가 할 수있는 일은 [jsfiddle] [1]. 하지만 고정 높이를 설정해야 이제는 어떻게 든 작동합니다. 그러나 나는 반응이 있어야한다. 그리고 패널 너비는 부모 너비에 100 % 기준이되어야합니다.

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

Answer 1

먼저 div 요소 중 일부를 재정렬하고 이름을 바꿔야합니다. 두 개의 동일한 id (id = "accordion")가 있는데, 첫 번째는 두 번째 안쪽에 있습니다. 첫 번째 "아코디언"의 id를 변경 한 다음 두 번째 "accordion"div (class = "panel-group"인 요소 앞에 닫는 div와 첫 번째 div를 추가)에서 분리해야합니다.
중요 : 두 번째 "아코디언"의 이름은 동적 요소가 열리는 상위 요소이기 때문에 변경하지 마십시오!

둘째, 귀하의 CSS 파일 조정 :`#accordion : 페이지에 아코디언에 맞게 다음 줄을 추가

1. 을 {폭 : 90vh;}`와`.panel {폭 : 100 %; }`;
2. `.cont {width : ...}`,`.cont {margin-left : ...}`(및/또는`.cont {margin-right : ...}`)를 조정하는 미디어 쿼리를 추가하십시오.)와`.panel-body {width : ...}`속성을 사용하여 다른 뷰포트 크기를 일치시킵니다.

완전한 jsfiddle은 here입니다.

HTML :

#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; 
    ... 
} 

참고 : 당신이 당신의 아코디언의 높이를 제어

:

<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-속성/설정 변경 '.panel을 {폭 : ...}`와`#accordion {width : ...} '를 사용합니다. 슬라이딩 패널의 너비는`.panel-body {width : ...}`에 의해 제어되고 슬라이딩 패널의 텍스트의 수직 위치는`.cont {margin-left : ...}`또는` .cont {margin-right : ...}`