Bootstrap折叠侧边栏不隐藏在一边答案

【问题标题】：Bootstrap collapsing sidebar not hiding to the sideBootstrap折叠侧边栏不隐藏在一边
【发布时间】：2014-12-04 22:13:06
【问题描述】：

我的引导代码有问题。我正在尝试在移动设备上从右侧进入侧边栏，就像这里一样：http://getbootstrap.com/examples/offcanvas/ 但我似乎无法让它工作。我也试图让人字形图标在左右箭头之间变化，但这不起作用，即使我以前用左侧边栏让它工作过。我的项目位于此处，感谢您提供任何帮助piston.serverpit.com/bootstrap/main

编辑：我已经设法让按钮和操作正常工作，现在唯一的问题似乎是侧边栏将自己置于页面内容下方而不是页面的一侧。我该如何解决这个问题？

Fiddle: http://jsfiddle.net/zauLh39y/

EDIT2：通过 offcanvas 示例从头开始获得了一个工作示例，但是当我尝试将文章代码放入正文时，它仍然会中断......想法？似乎主要问题是在 CSS 中设置侧边栏的最小宽度。 http://jsfiddle.net/xyd6ttbe/

【问题讨论】：

SO 需要代码这里。
把你的代码放在一个小提琴中

标签： twitter-bootstrap sidebar

【解决方案1】：

根据您的外部示例，更新到此

#sidebar{
   position: absolute;
   /* no float, no left or right */
}
.row-offcanvas-right {
   left: 100%; /*instead of right xx...*/
}
.row-offcanvas-right.active {
   left: 50%;  /*instead of right xx...*/
}

您可能还需要为宽屏模式更新 css。

顺便说一句：如果你在 jsfiddle、codepen 或 stackoverflow 中提供了一个工作演示，那会更容易帮助你。

【讨论】：

这似乎不太好用。我遇到的问题是，当我缩小窗口时，侧边栏会在内容下方移动，然后一旦它被视为移动设备，它就会停留在底部。在我提出问题的示例中，当您缩小窗口时，侧边栏完全消失，当您点击切换侧边栏按钮时，窗口大小不会改变（您不能向左或向右滚动），这就是我想要的。

【解决方案2】：

我已经设法修复它；主要问题是强制侧边栏的宽度，它最终被推到文章下方的原因是因为<hr> 标签。

更新代码见这里：http://jsfiddle.net/rwstwv0e/

【讨论】：