Bootstrap 3 中带有切换功能的左侧边栏不起作用 [英] Left sidebar with toggle in Bootstrap 3 not working

问题描述

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

我的应用程序需要左侧边栏是页面的完整高度(减去顶部导航栏和页脚)并且内容区域需要滚动.

我已经创建了一个小提琴来展示我到目前为止的内容:https://jsfiddle.net/y9khea25/1/

我遇到的问题是，当 main 具有 #menu-toggle 时，切换侧边栏的按钮 #menu-toggle 会移到视口的左侧和外部删除了 code>.active 类(即当左侧边栏折叠"时).这意味着用户无法重新打开侧边栏.

我已经根据原始 Bootsnip 中的标记改编了标记.这部分意味着他们最初在 .page-content-wrapper 中的内容现在在 main 中，然后使用 Bootstrap 的 .col 类.我不知道这是否导致了单独的问题?

<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>项目 1</li>

<div class="content col-xs-12 col-sm-9 col-md-10"><!-- 页面内容-->

</main>

解决方案

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

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 {浮动:对；}

I'm trying to adapt a Bootstrap template shown here https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle so that it includes a top navbar and a footer.

My application needs the left sidebar to be the full height of the page (minus the top navbar and footer) and for the content area to scroll.

I've created a fiddle to show what I've got so far here: https://jsfiddle.net/y9khea25/1/

The problem I'm having is that the button to toggle the sidebar, #menu-toggle, goes to the left and outside the viewport when main has the .active class removed (i.e. when the left sidebar is "collapsed"). This means that the user can't re-open the sidebar.

I have adapted the markup from what was in the original Bootsnip. Part of this means that what they had originally inside .page-content-wrapper is now inside main which then uses Bootstrap's .col classes. I don't know if this is causing a separate problem?

<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>

解决方案

The problem is that the hamburger menu has to remain in the visible part of the screen. In the right of your red sidebar.

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 中带有切换功能的左侧边栏不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！