在大屏幕上水平折叠手风琴，在小屏幕上垂直折叠手风琴 [英] Collapse accordion horizontally on large screens and vertically on small screens

问题描述

在此答案是横向折叠的一个很好的解决方案： Bootstrap 3.0水平折叠

On this Answer is a great solution for the horizontal collapse: Bootstrap 3.0 Collapse Horizontally

但是我正在做的布局是手风琴在div下面滑动到它的左边为响应视图，然后看起来视觉上不好。在SM和XS大小调整中，可以让手风琴改变方向并向下滑动。

But the layout I am working on has that accordion slide under the div to the left of it for responsive view which then looks visually bad. Is it possible to have the accordion change orientation and slide downward in the SM and XS sizing.

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

I modified the code a little on this fiddle: http://jsfiddle.net/kylebellamy/q9GLR/176/

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

But the other issue I'm seeing is that the text is also rotated inside the accordion. I tried creating a second set of rules for a "p" tag but that doesn't seem to work.

这是必需的代码：

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

推荐答案

http://www.w3.org/TR/css3-mediaqueries/ =nofollow> css @media 查询禁用转换if屏幕小于某个像素宽度（768像素是引导程序的崩溃点）。

Use a css @media query to disable the transform if the screen is smaller than a certain pixel width (768px is bootstrap's collapse point).

（演示）

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

这篇关于在大屏幕上水平折叠手风琴，在小屏幕上垂直折叠手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！