javascript - 试图让 bootstrap 折叠从右到左水平打开

Question

我有这个fiddle在这里，我希望内容从右侧折叠到左侧。这可能吗？

.collapse {
  display: none;
  visibility: hidden;
}
.collapse.in {
  display: block;
  visibility: visible;
}
tr.collapse.in {
  display: table-row;
}
tbody.collapse.in {
  display: table-row-group;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
  Horizontal Collapsible
</button>

<div id="container" style="width:300px;height:400px;border:1px solid black;">
  <div id="demo" class="collapse in width" style="background-color:yellow;">
    <div style="padding: 20px; overflow:hidden; width:300px;">
      Here is my content
    </div>
  </div>
</div>

Answer 1

DEMO

只需将 float:right 添加到您的 element-#demo 中，如下所示:

<div id="demo" class="collapse in width" style="background-color:yellow;float:right;">

Note - This will give you some overflow issue and I hope you will be able to fix it since width and height are predefined by you