twitter-bootstrap Bootstrap 3.0 水平折叠

Bootstrap 3.0 Collapse Horizontally

提问by Danilo Faria

I would like to know how to use the collapse feature on Bootstrap 3.0 horizontally instead of vertically.

我想知道如何在 Bootstrap 3.0 上水平而不是垂直使用折叠功能。

I know this has been asked here already (Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical), but none of the answers works.

我知道这里已经有人问过这个问题（Twitter Bootstrap Collapse 插件 Direction-Horizo​​ntal 而不是 Vertical），但没有一个答案有效。

回答by Bass Jobsen

The answer to your question is already given here: https://stackoverflow.com/a/18602739/1596547

您的问题的答案已经在这里给出：https: //stackoverflow.com/a/18602739/1596547

The collapse plugin adds a class .collapsingto your element which has a css3 transition. By default the transition changes the height from 0 to (set or auto) so the effect will be vertical. The plugin also sets the height of the element to 0 before the class has been add.

折叠插件.collapsing向具有 css3 过渡的元素添加一个类。默认情况下，过渡将高度从 0 更改为（设置或自动），因此效果将是垂直的。该插件还在添加类之前将元素的高度设置为 0。

Althought not mentioned in the docs the plugin can do the same for width; set teh width of the element to 0 and add a class. To trigger the plugin to use the width in stead of the height you will have to add an extra class .width:

虽然文档中没有提到插件可以对宽度做同样的事情；将元素的宽度设置为 0 并添加一个类。要触发插件使用宽度而不是高度，您必须添加一个额外的类.width：

 <div id="democontent" class="collapse width">

The plugin will check for this class:

该插件将检查此类：

  Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

Bootstap's CSS doesn't provide a transistion for collapse.widthso you have have to add it like:

Bootstap 的 CSS 不提供转换，collapse.width因此您必须添加它，例如：

.collapse.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

Example, see also: http://bootply.com/85690

示例，另见：http: //bootply.com/85690

<div class="container">
    <div style="height:100px;float:left;background-color:red">
        <button data-toggle="collapse" data-target="#democontent">
            o<br>
            p<br>
            e<br>
            n<br>
        </button>   
    </div>
      <div id="democontent" class="collapse width" style="height:100px;background-color:blue;color:white;">
        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>  

回答by rails_id

I know this is late, but I just wanna share my solution.

我知道这已经晚了，但我只想分享我的解决方案。

You could play with css. Example I put images with same resolution every collapse body.

你可以玩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;
}
.panel-group .panel img {
  margin-left:400px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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">
                          Suzuki
                        </a>
                      </h4>

                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <img src="http://files.conceptcarz.com/img/Suzuki/suzuki-concept-kizashi-3-2008-01-800.jpg" />
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                  Chevrolet
                </a>
              </h4>

                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <img src="http://www.wallsave.com/wallpapers/800x400/zl-camaro/65234/zl-camaro-chevrolet-carbon-concept-car-65234.jpg" />
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  Volvo
                </a>
              </h4>

                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                            <img src="http://files.conceptcarz.com/img/Volvo/2009_Volvo_S60_Concept-Image-01-800.jpg" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

See demo on jsfiddle

看 demo on jsfiddle

If you want to use write text instead an image, try this jsfiddle.net/fauzi/h7szj1ku/

如果你想用文字代替图像，试试这个 jsfiddle.net/fauzi/h7szj1ku/