Bootstrap 3.0 水平折叠

Question

Bootstrap 3.0 水平折叠

twitter-bootstraptwitter-bootstrap-3

22

我想了解如何在Bootstrap 3.0中水平使用折叠功能，而不是垂直使用。

我知道这个问题已经在这里提出过（Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical），但没有一个答案是有效的。

- Danilo Faria

2

请发布您尝试使用先前答案的结果，并告诉我们您遇到了什么问题，否则这只是一个重复的问题。 - madth3

好的，我按照他们说的做了，但是没有起作用。我猜可能是因为我使用的是最新版本的Bootstrap（3.0），而那个问题是在发布之前发布的。 - Danilo Faria

可能是[推特Bootstrap折叠插件方向]的重复问题。(https://dev59.com/6Gcs5IYBdhLWcg3w5H5a) - Louis

2个回答

16

虽然有些晚了，但我想分享我的解决方案。

你可以用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>

查看 jsfiddle 上的演示

如果您想使用文本而不是图像，请尝试此jsfiddle.net/fauzi/h7szj1ku/。

- rails_id

很好的例子，但是当我写文本内容时，图像会垂直地从底部到顶部出现。我该如何使其水平从左到右呢？ - Ganesh H

1

通过代码 jsfiddle.net/fauzi/h7szj1ku/ 更改面板内容的宽度可以完全解决这个问题。谢谢！ - Ganesh H

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bass Jobsen · Accepted Answer

你的问题的答案已经在这里给出：https://dev59.com/6Gcs5IYBdhLWcg3w5H5a#18602739 折叠插件会向您的元素添加一个类.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'
  }

Bootstrap的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>