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