html - Bootstrap 响应式水平 Accordion 面板

Question

您好，我已经搜索了几个小时，但没有找到我的特定问题。我很沮丧。我有一个通过 Bootstrap 的水平 Accordion ，它不会在其容器和/或视口(viewport)内响应。我不知道从哪里开始，我整晚都在工作。 CSS 是一团糟，因为我正在尝试一切，所以很抱歉。非常感谢帮助

目标是创建这样的东西并让它响应:

但是我的 Accordion 表现如下:这是在 1288px

这大约是 1080 像素，因为您可以看到 Accordion 完全没有响应保持其尺寸并忽略包装 div

一旦我进入移动端就没问题了，因为它是垂直的？

代码:

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