Bootstrap 3.0 水平折叠 [英] Bootstrap 3.0 Collapse Horizontally

问题描述

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

我知道这里已经有人问过了(Twitter Bootstrap 折叠插件方向——水平而不是垂直)，但没有一个答案有效.

解决方案

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

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

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

插件会检查这个类:

 Collapse.prototype.dimension = function () {var hasWidth = this.$element.hasClass('width')返回 hasWidth ?宽度":高度"}

Bootstap 的 CSS 没有为 collapse.width 提供转换，所以你必须像这样添加它:

.collapse.width {高度:自动；-webkit-transition:宽度 0.35s 缓和；-moz-transition:宽度 0.35s 缓和；-o-transition:宽度 0.35s 缓和；过渡:宽度 0.35s 缓和；}

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

<div style="height:100px;float:left;background-color:red"><button data-toggle="collapse" data-target="#democontent"><br><br>电子<br>
<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 offcia aute, non cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单源咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，它们是可持续的 VHS.

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

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

解决方案

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

The collapse plugin adds a class .collapsing to 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.

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:

 <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.width so you have have to add it like:

.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

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

这篇关于Bootstrap 3.0 水平折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！