twitter-bootstrap - 使用 Twitter Bootstrap 实现垂直滑动 div

Question

我在 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 类。

有更好的方法吗？

谢谢！

Answer 1

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 现在将默认折叠，如果您单击该按钮，它将垂直展开。