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

使用Twitter Bootstrap实现垂直滑动div

1 个答案: