Question

我正在尝试调整此处https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle所示的Bootstrap模板，使其包含顶部导航栏和页脚。

我的应用程序需要左侧边栏为页面的整个高度（减去顶部导航栏和页脚），然后滚动内容区域。

我创建了一个小提琴来显示到目前为止我在这里所做的事情：https://jsfiddle.net/y9khea25/1/

我遇到的问题是，当#menu-toggle删除了main类时，切换边栏.active的按钮位于视口的左侧和外部（即当左侧边栏为“折叠”）。这意味着用户无法重新打开侧栏。

我从原始的Bootsnip中修改了标记。这部分意味着他们最初在.page-content-wrapper中拥有的东西现在在main内部，然后使用Bootstrap的.col类。我不知道这是否引起单独的问题？

<main class="active">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation">

                <a id="menu-toggle" href="#"><span class="glyphicon glyphicon-align-justify"></span></a></li>

                <ul>
                    <li>item 1</li>
                </ul>
            </div>

            <div class="content col-xs-12 col-sm-9 col-md-10">
            <!-- page content -->
            </div>
    </div>
</main>

我非常感谢有关解决此问题的提示。另外，如果有人对如何在Bootstrap 3中实现相同的效果有更好的教程，那么我会很感兴趣-我搜索了它们，但找不到任何内容。

Answer 1

问题在于，汉堡菜单必须保留在屏幕的可见部分。在红色边栏的右侧。

https://jsfiddle.net/y9khea25/5/

HTML

...
<a id="menu-toggle" class="pull-right" href="#"><span class="glyphicon glyphicon-align-justify"></span></a></li>
...

CSS

.pull-right {
    float: right;
}

Bootstrap 3中带有切换功能的左侧边栏不起作用

1 个答案: