我正在使用Bootstrap 3.3.7并试图创建一个左手菜单，用户可以在任何视口大小上切换可见/隐藏。基本上是一个菜单，用户可以选择显示/隐藏它的响应性。
我发现的最接近的例子就是：https://codepen.io/assemany/pen/grJoyx
然而，我想要实现的一个功能是一个按钮，用户可以将此菜单切换为在任何视口大小>上可见/不可见。目前它正在使用Bootstrap的网格系统和媒体查询，这意味着切换屏幕的按钮没有显示在任何＆gt; 768px：
@media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
background:#ecf0f1;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -40%;
}
.row-offcanvas-left.active {
left: 40%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 40%;
margin-left: 12px;
}
}
我在这里找到另一个例子https://codepen.io/daanvankerkom/pen/vZBRoM，它有我正在寻找的按钮和效果。但是，此菜单似乎与内容“重叠”而不是以响应方式工作。我发现的一些其他示例似乎没有响应，但只是在内容的顶部显示菜单，这不是我想要的。
回到第一个Codepen示例，我尝试添加按钮，将侧边栏切换到侧边栏本身：
<div class="row row-offcanvas row-offcanvas-left">
<a href="#" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
我删除了.visible-xs类，以便按钮可以在任何屏幕尺寸上显示。
这似乎不起作用 - 按钮本身不起作用，即使保留了以下js：
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
当视口大小调整为＆lt; 768px时，菜单仅“消失”。
有人能就这是否可能给我指导？我已经意识到的一个问题是左侧边栏总是需要占用一定的宽度，以便切换可见性的按钮适合它 - 不确定在min-width:上设置#sidebar是否是去的地方？
答案 0 :(得分：0)
可以实现所需的效果，因为你必须删除媒体css @media screen and (max-width: 768px)以显示所有屏幕尺寸的显示切换效果，但是通过删除媒体css，你可以看到你的页面提供水平滚动（没有响应）当你打开侧边栏时，为了保持页面的响应行为，你必须改变一些css，就像我在我的片段中所做的那样
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});body {
padding-top: 50px;
}
footer {
padding-left: 15px;
padding-right: 15px;
}
/*
* Off Canvas
* --------------------------------------------------
*/
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
background:#ecf0f1;
}
.row-offcanvas-left #sidebar {
display: none;
}
.row-offcanvas-left.active #sidebar {
display: block;
}
#sidebar {
padding:15px;
margin-top:10px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="sidebar-nav">
<ul class="nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-divider"></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-divider"></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!--/.well -->
</div>
<!--/span-->
<div class="col-xs-12 col-sm-9">
<br>
<div class="jumbotron">
<a href="#" class="" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap
friendly HTML, CSS and Javascript.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript. Bootstrap is a front-end framework that uses CSS and JavaScript to
facilitate responsive Web design. </p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap
friendly HTML, CSS and Javascript.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap
friendly HTML, CSS and Javascript.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!--/span-->
</div>
<!--/row-->
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div>
<!--/.container-->