Twitter Bootstrap Collapse プラグインの方向 - 垂直ではなく水平 質問する

Twitter Bootstrap Collapse プラグインの方向 - 垂直ではなく水平 質問する

Bootstrap Collapse プラグインを垂直方向ではなく水平方向に折りたたむ方法はありますか? コードを見ると、この機能は組み込まれていないようですが、何か見落としているだけであることを願っています...

ご協力いただければ幸いです。ありがとうございます!

ベストアンサー1

JavaScript を変更したり追加したりせずに、これを非常に簡単に実行する方法を見つけました。

まず、すべての Twitter Bootstrap CSS の後に次の CSS を定義します。

.collapse {
  height: auto;
  width: auto;
}

.collapse.height {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

.collapse.width {
  position: relative;
  width: 0;
  overflow: hidden;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

.collapse.in.width {
  width: auto;
}

.collapse.in.height {
  height: auto;
}

次に、ターゲット要素 (クラスを定義する場所) に、アニメーション化するプロパティに応じて.collapseクラスを追加する必要があります。.width.height

最後に、あなたはしなければならない幅をアニメーション化する場合は、ターゲット要素の内容をラップし、その幅を明示的に定義します。高さをアニメーション化する場合、これは必要ありません。

実際の例はこちらをご覧ください ->http://jsfiddle.net/ud3323/ZBAHS/

おすすめ記事