Bootstrap 3.0水平折叠

Question

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

我知道这已经在这里被问过了(Twitter Bootstrap Collapse插件Direction-Horizo​​ntal而不是Vertical),但没有一个答案有效.

Answer 1

您的问题的答案已在此处给出:https://stackoverflow.com/a/18602739/1596547

崩溃插件.collapsing为您的元素添加了一个具有css3过渡的类.默认情况下,过渡将高度从0更改为(设置或自动),因此效果将是垂直的.在添加类之前,插件还将元素的高度设置为0.

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

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

该插件将检查此类:

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

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

示例,另请参阅: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>  

Answer 2

我知道这已经很晚了,但我只想分享我的解决方案.

你可以玩css.示例I每个折叠体放置具有相同分辨率的图像.

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>

看到 demo on jsfiddle

如果你想使用写文本而不是图像,试试这个jsfiddle.net/fauzi/h7szj1ku/