Question

关于此答案是横向崩溃的一个很好的解决方案：Bootstrap 3.0 Collapse Horizontally

但是我正在制作的布局让手风琴在它左边的div下方滑动以获得响应式视图，然后看起来视觉上很糟糕。是否可以让手风琴改变方向并在SM和XS尺寸中向下滑动。

我在这个小提琴上修改了一些代码：http://jsfiddle.net/kylebellamy/q9GLR/176/

但我看到的另一个问题是文本也在手风琴内旋转。我尝试为“p”标签创建第二组规则，但这似乎不起作用。

这是必需的代码：

HTML：

<div class="container">
    <div class="row">
        <div class="content">
            <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">
                          Accordion 1
                        </a>
                      </h4>

                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p><h1>Title</h1><br>A paragraph of text about something pertinant to the site which people could read should the feel the need to read about it. They could skip it as well but this keeps the initial view a good deal less text heavy, see?<br>- Some Source</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

CSS：

html, body {
    background-color:#e9eaed;
}
.content {
    width:960px;
    height:0px;
    margin-right: auto;
    margin-left: auto;
}
.panel-group {
    width:430px;
    z-index: 100;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
}
.panel-heading {
    width: 430px;
}
.panel-title {
    height:18px
}
.panel-title a {
    float:right;
    text-decoration:none;
    padding: 10px 430px;
    margin: -10px -430px;
}
.panel-body {
    height:830px;
}
.panel-group img {
    -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;
}
p {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0%) rotate(0deg);
    -webkit-transform-origin: left top;
    -moz-transform: translateX(0%) rotate(0deg);
    -moz-transform-origin: left top;
    -o-transform: translateX(0%) rotate(0deg);
    -o-transform-origin: left top;
    transform: translateX(0%) rotate(0deg);
    transform-origin: left top;
}
.panel-group .panel img {
    margin-left:400px;
    position: absolute;
}

Answer 1

如果屏幕小于某个像素宽度（768px是bootstrap的折叠点），请使用css @media query禁用转换。

（Demo）

@media (max-width: 768px) {
    .panel-group {
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none;
    }
}

在大屏幕上水平折叠手风琴，在小屏幕上垂直折叠

1 个答案: