试图从右到左水平地开启自举崩溃

I have this fiddle here where I would like the content to collapse from the right side opening up to the left. Is this possible?

我有这个小提琴,我希望内容从左侧向左侧折叠。这可能吗?

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

1 个解决方案

#1

DEMO

Just add float:right to your element-#demo as below:

只需将float:right添加到您的元素 - #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

注意 - 这会给你一些溢出问题,我希望你能解决它,因为宽度和高度是由你预定义的

#1