1

私はhtmlのような基本的な構造を持っています:

<div class="container-fluid">

  <div class="row-fluid">

    <div class="span2">
      <!--Sidebar content-->
    </div>

    <div class="span10">
      <!--Body content-->
    </div>

  </div>

</div>

サイドバーを非表示/表示するトグル ボタンを追加したいと思います (スライドは垂直になります)。サイドバーが非表示の場合、コンテンツで領域全体を使用したいと考えています (これはおそらく span12 になります)。サイドバーが表示されている場合、すべてが元に戻ります。

私のアプローチは、サイドバーの状態に応じて、本文コンテンツ領域の span10 クラスと span12 クラスを切り替えることです。

それを行うより良い方法はありますか？

ありがとう！

4

1 に答える 1

3

Stack Overflowが私の回答をコメントに変換したので、より完全な回答を投稿します。

<div class="container">
  <div class="row-fluid">

    <div class="collapse-group">
      <div class="span2">
        <!--Sidebar content-->
      </div>
      <a class="btn" data-toggle="collapse" data-target=".span2">Toggle</a>
    </div>

    <div class="span10">
      <!--Body content-->
    </div>

  </div>

</div>

span2はデフォルトで折りたたまれ、ボタンをクリックすると垂直方向に展開されます。

于 2013-01-04T11:59:22.590 に答える