Bootstrap 手风琴水平折叠

Question

我的代码基于以下问题，但在我的修改版本中无法达到我想要的预期结果：

http://jsfiddle.net/kylebellamy/q9GLR/180/

正如您将在我的代码中看到的那样，我希望手风琴的一个面板 opens/closes 水平放置，而另一个面板始终保持打开状态。我几乎明白了，但第二个（打开的）面板的文本仍然存在问题：它应该使用页面宽度的所有其余部分，但它没有，并且文本超出了底部的面板区域。

你知道我该怎么做吗？

请在此处查看我的代码：

<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">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class="panel-content">
          <ul>
            <li>Link#1</li>
            <li>Link#2</li>
            <li>Link#3</li>
            <li>Link#4</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
      <div class="panel-body">
      <div class="panel-content">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
      </div>
    </div>
  </div>

这里是 css:

.panel-group {
    width: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: 100%;
}
.panel-body {
    height:200px;
}
.panel-group .panel-content {
    -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;
}
.panel-group .panel .panel-content {
    margin-left:520px;
    position: absolute;
}

这里和fiddle一样：https://jsfiddle.net/dbahiense/p4bkt6ed/

Answer 1

尝试使用以下代码可能会对您有所帮助。

html, body {
    background-color:#e9eaed;
}
.content {
    width:960px;
    height:0px;
    margin-right: auto;
    margin-left: auto;
}
.panel-group {
    width:230px;
    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: 230px;
}
.panel-title {
    height:18px
}
.panel-title a {
    float:right;
    text-decoration:none;
    padding: 10px 100px;
    margin: -10px -100px;
}
.panel-body {
    height:430px;
}
.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;
}
.textRotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: 80px !important;
    padding-top: 70px !important;
    width: 350px !important;
    
}
.panel-group .panel img {
    margin-left:300px;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<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">
                            <div class="textRotate">
                            

 <ul>
        <li>Link#1</li>
        <li>Link#2</li>
        <li>Link#3</li>
        <li>Link#4</li>
      </ul>
                             </div>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse active">
                        <div class="panel-body">
                            <div class="textRotate">
                                <h3>Title</h3><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</div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>

Bootstrap 手风琴水平折叠

Bootstrap accordion collapsing horizontally

css

horizontal-accordion

twitter-bootstrap

bootstrap-accordion