Collapse accordion horizontally on large screens and vertically on small screens

问题

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

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.

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

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.

Here's the required code:

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

回答1:

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).

(Demo)

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

来源：https://stackoverflow.com/questions/30598559/collapse-accordion-horizontally-on-large-screens-and-vertically-on-small-screens

标签

css

twitter-bootstrap

accordion