Question

所以我使用Bootstrap创建了我的网站。我想添加一个类似facebook的可折叠侧边栏。我试图将我的网站分成两列。一个用于侧边栏，另一个用于整个网站，使用col-md-2和col-md-10，但正在发生的问题是网站正在向右侧溢出。这就是我所做的：

<html>

    <head></head>

    <body>
        <div class="container">
            <div class="col-md-2">...Sidebar...</div>
            <div class="col-md-10">...Rest of the website...</div>
        </div>
    </body>

</html>

但该网站向右侧溢出。我和其他许多col-*一起尝试过，但无济于事。我还在主体中添加了.clearfix类，但仍然无法修复溢出的问题。

Q1。如何修复溢出问题？

其次，我想让侧边栏折叠起来。我想我会通过隐藏col-md-2并将网站持有者div的类更改为col-md-12并在用户取消折叠边栏但我知道将要发生的问题时将其反转来实现是因为我不会有平滑的滑动效果。

Q2。如何制作具有平滑滑动效果的可折叠侧杆？

Demo of what's happening.

Answer 1

Q1：您是否尝试在容器后面添加一行？

<div class="contianer">
   <div class="row">
      <div class="col-md-2">...Sidebar...</div>
      <div class="col-md-10">...Content...</div>
   </div>
</div>

Q2：您可以在屏幕顶部创建侧边栏并使用jquery为其设置动画，以便在单击菜单按钮时将其向下滑动到所需位置。

添加可折叠侧边栏

1 个答案: