Question

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

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

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

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

Answer 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中提供一个工作演示，那么它会更容易帮助你。

Answer 2

我设法解决了这个问题;主要问题是强制侧边栏的宽度以及它最终被推到文章下面的原因是因为<hr>标签。

有关更新的代码，请参阅此处：http://jsfiddle.net/rwstwv0e/

Bootstrap折叠侧边栏没有隐藏到侧面

2 个答案: