Bootstrap响应水平手风琴面板

Question

嗨，我一直在寻找小时，并没有来acroos我的特殊问题。我感到非常沮丧。我有一个通过bootstrap的水平手风琴，它不会在其容器和/或视口中响应。我不知道从哪里开始，我一整晚都在工作。由于我对所有事情都表示歉意，CSS非常混乱。帮助是极大的赞赏

的目标是这样创造的东西，并把它响应：

但是我的手风琴的行为就像这样： 这是1288px

这是围绕1080px你可以看到手风琴根本没有反应，保持它的尺寸，并忽略了包装divs

一旦我进入移动它的罚款，是因为它是垂直的？

代码：

<div class="row"> 
<div class="col-md-12"> 
    <div class="accordion-wrapper"> 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
     <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingOne"> 
       <h4 class="panel-title"> 
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Featured Story 
        </a> 
       </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
       <div class="panel-body"> 
        <h4>Slide Title</h4> 
       </div> 
      </div> 
     </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingTwo"> 
      <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">About The Reins Act 
       </a> 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       <h4>Slide Title</h4> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingThree"> 
      <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Video 
       </a> 
      </h4> 
     </div> 
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
      <div class="panel-body"> 
       <h4>Slide Title</h4> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingFour"> 
      <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseFour">Photos 
       </a> 
      </h4> 
     </div> 
     <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> 
      <div class="panel-body"> 
       <h4>Slide Title</h4> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

.accordion-wrapper { 
display: block; 
height: 350px; 
max-height: 100%; 
width: 750px; 
} 

#accordion { 
max-width: 36.125rem; 
margin-left: 15px; 
} 

.panel-group { 
-webkit-backface-visibility: hidden; 
-webkit-transform: translateX(-98%) rotate(-90deg); 
-webkit-transform-origin: right top; 
-moz-transform: translateX(-98%) rotate(-90deg); 
-moz-transform-origin: right top; 
-o-transform: translateX(-98%) rotate(-90deg); 
-o-transform-origin: right top; 
transform: translateX(-98%) rotate(-90deg); 
transform-origin: right top; 
margin-bottom: 15px; 
} 

.panel-body { 
-webkit-backface-visibility: hidden; 
-webkit-transform: translateX(0%) rotate(90deg); 
-webkit-transform-origin: left top; 
-moz-transform: translateX(0%) rotate(90deg); 
-moz-transform-origin: left top; 
-o-transform: translateX(0%) rotate(90deg); 
-o-transform-origin: left top; 
transform: translateX(0%) rotate(90deg); 
transform-origin: left top; 
height: 86.2rem; 
width: 20.125em; 
} 

Answer 1

增加了一些CSS的小设备。

@media (max-width : 767px){ 
      .accordion-wrapper { 
       display: block; 
       height: auto; 
       max-height: 100%; 
      } 
      #accordion { 
       margin-left: 0; 
       padding: 15px; 
      } 
      .panel-group { 
       -webkit-backface-visibility: hidden; 
       -webkit-transform: none; 
       -webkit-transform-origin: right top; 
       -moz-transform: none; 
       -moz-transform-origin: right top; 
       -o-transform: none; 
       -o-transform-origin: right top; 
       transform: none; 
       transform-origin: right top; 
       margin-bottom: 15px; 
      } 
      .panel-body { 
       -webkit-backface-visibility: hidden; 
       -webkit-transform: none; 
       -webkit-transform-origin: left top; 
       -moz-transform: none; 
       -moz-transform-origin: left top; 
       -o-transform: translateX(0%) rotate(90deg); 
       -o-transform-origin: left top; 
       transform: none; 
       transform-origin: left top; 
       height: auto; 
       width: auto; 
      } 
     }