Bootstrap Off Canvas显示全高
我正在尝试使用Bootstrap off canavas左侧栏来切换小型设备。
这是bootply代码示例：
当你点击手风琴上的内容时在手机上显示的问题 不要将页脚向下推，而是隐藏在它后面。
以下是完整代码：
<!doctype html> <html lang="en"> <head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style> /*a * Style tweaks *
-------------------------------------------------- */ body { padding-top: 70px; } footer { padding-left: 15px; padding-right: 15px; }
/* * Off Canvas * --------------------------------------------------
*/ @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; }
.row-offcanvas-left .sidebar-offcanvas {
left: -50%; }
.row-offcanvas-left.active {
left: 50%; }
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%;
margin-left: 12px; } } </style>
</head> <body> <div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> <div class="container">
<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">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<p class="visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
</p>
<div class="well sidebar-nav">
<ul class="nav">
<li>Sidebar</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li>Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li>Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
</div>
</div>
</div>
</div>
</div><!--/.well -->
</div><!--/span-->
<div class="col-xs-12 col-sm-9">
<p class="pull-left visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle Nav</button>
</p>
<div class="jumbotron">
<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>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </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-->
</div><!--/.container-->
<div class="">
<nav class="navbar navbar-inverse navbar-sticky-bottom" role="navigation">
<div class="row-fluid" style="padding-top:1em;">
<div class="col-md-3 col-sm-6 col-xs-12">
<ul class="list-unstyled">
<li><a href="#"> Home</a></li>
<li><a href="#" class="navbar-link"> Ccontact_us</a></li>
<li><a href="#" class="navbar-link"> Announcements</a></li>
<li><a href="#" class="navbar-link"> About_us</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
Text and links
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="navbar-text">Text and links</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="navbar-text">copyright</p>
</div>
</div><!--row-->
</nav> </div>
<script> $(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
}); }); </script>
</body> </html>
我认为这个css存在问题：
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%;
margin-left: 12px;
}
我发现了这个建议，但没有解决问题：
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').hasClass( "active" ) ? $('.sidebar-offcanvas').css("position","absolute") : $('.sidebar-offcanvas').css("position","relative");
$('.row-offcanvas').toggleClass('active');
});
});
4 个答案:
答案 0 :(得分：1)
她是一个完整的页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="../../docs-assets/ico/favicon.png" rel="shortcut icon">
<title>Starter Template for Bootstrap</title><!-- Bootstrap core CSS -->
<link href=
"http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel=
"stylesheet">
<link href=
"http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css"
rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
body {
padding-top: 50px;
}
.content_wrap {
padding: 40px 15px;
text-align: center;
}
footer {
background-color: #222;
color: #777;
}
/* * Off Canvas * --------------------------------------------------
*/ @media screen and (max-width: 768px) {
.row-offcanvas {
}
#sidebar {
display:none;
}
#sidebar.in {
display:block;
position: fixed;
z-index: 1030;
top: 0px;
bottom: 0px;
overflow-y: auto;
border-radius: 0px;
padding:0px;
min-height:100%;
width:300px;
}
#sidebar.in .well {
margin:0px;
border-radius: 0px;
border:none;
min-height:100%;
}
}
</style>
</head>
<body>
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
<a class="navmenu-brand" href="#">Project name</a>
<ul class="nav navmenu-nav">
<li>
<a href="../navmenu/">Slide in</a>
</li>
<li class="active">
<a href="./">Push</a>
</li>
<li>
<a href="../navmenu-reveal/">Reveal</a>
</li>
<li>
<a href="../navbar-offcanvas/">Off canvas navbar</a>
</li>
</ul>
<ul class="nav navmenu-nav">
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href=
"#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu navmenu-nav">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>
<a href="#">Separated link</a>
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><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>
</div>
<div class="container content_wrap">
<div class="row">
<div class="col-xs-6 col-sm-3" id="sidebar">
<div class="well sidebar-nav">
<ul class="nav">
<li>Sidebar</li>
<li class="active">
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>Sidebar</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>Sidebar</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent=
"#accordion2" data-toggle="collapse" href=
"#collapseOne">Collapsible Group Item #1</a>
</div>
<div class="accordion-body collapse" id=
"collapseOne">
<div class="accordion-inner">
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent=
"#accordion2" data-toggle="collapse" href=
"#collapseTwo">Collapsible Group Item #2</a>
</div>
<div class="accordion-body collapse" id=
"collapseTwo">
<div class="accordion-inner">
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
Sidebar text...<br>
</div>
</div>
</div>
</div>
</div><!--/.well -->
</div><!--/span-->
<div class="col-xs-12 col-sm-9" id="main">
<p class="pull-left visible-xs"><button class=
"btn btn-primary btn-xs glyphicon glyphicon-chevron-left"
data-canvas="body" data-target="#sidebar" data-toggle=
"offcanvas" style="font-style: italic" type=
"button"></button></p>
<div class="jumbotron">
<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-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>
<div class="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>
<div class="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>
</div><!--/row-->
<div class="row">
<div class="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>
<div class="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>
<div class="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>
</div><!--/row-->
</div>
</div><!--/row-->
</div>
<footer>
<div class="container">
<div class="row-fluid" style="padding-top:1em;">
<div class="col-md-3 col-sm-6 col-xs-12">
<ul class="list-unstyled">
<li>
<a href="#">Home</a>
</li>
<li>
<a class="navbar-link" href="#">Ccontact us</a>
</li>
<li>
<a class="navbar-link" href="#">Announcements</a>
</li>
<li>
<a class="navbar-link" href="#">About us</a>
</li>
</ul>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="navbar-text">Text and links</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="navbar-text">Text and links</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="navbar-text">copyright</p>
</div>
</div>
</div><!--row-->
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
</body>
</html>
这是使用http://jasny.github.io/bootstrap/javascript/#offcanvas
中的offcanvas.js的解决方案和一些自定义CSS：
body {
padding-top: 50px;
}
.content_wrap {
padding: 40px 15px;
text-align: center;
}
footer {
background-color: #222;
color: #777;
}
/* * Off Canvas * --------------------------------------------------
*/
@media screen and (max-width: 768px) {
.row-offcanvas {
}
#sidebar {
display:none;
}
#sidebar.in {
display:block;
position: fixed;
z-index: 1030;
top: 0px;
bottom: 0px;
overflow-y: auto;
border-radius: 0px;
padding:0px;
min-height:100%;
width:300px;
}
#sidebar.in .well {
margin:0px;
border-radius: 0px;
border:none;
min-height:100%;
}
}
您可以看到完整代码here
和全屏结果here
更新 - 匹配您的代码
/*
* Off Canvas
* --------------------------------------------------
*/
@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;
}
.row-offcanvas-left.sidebar-offcanvas {
margin-left: -50%;
}
.sidebar-offcanvas {
width: 50%;
}
}
答案 1 :(得分：1)
我试图达到你想要的目标。以下是我解决它的方法。
基本上我认为区别在于我改变了CSS中的.row-offcanvas和.sidebar-offcanvas的位置。我在.sidebar-offcanvas.active
上将左右设置为0
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
$('.sidebar-offcanvas').toggleClass('active');
return false;
});
});/**
* Base structure
*/
body {
overflow-x:hidden;
padding-top:50px;
}
/**
* Top navigation
*/
.navbar-fixed-top {
border:0;
}
.sidebar-offcanvas {
background-color:#f5f5f5;
border-right:1px solid #eee;
bottom:0;
display:block;
left:0;
position:fixed;
overflow-x:hidden;
overflow-y:auto;
top:50px;
transition:all .25s ease-in-out;
width:250px;
z-index:1000;
}
.main {
left:250px;
padding:20px;
padding-left:40px;
padding-right:40px;
position:absolute;
width:calc(100% - 250px);
}
.main .page-header {
margin-top:0;
}
@media screen and (max-width: 768px) {
.main {
left:0;
padding:20px;
position:relative;
width:100%;
}
.row-offcanvas {
position:relative;
transition:all .25s ease-in-out;
}
.row-offcanvas-right {
right:0;
}
.row-offcanvas-left {
left:0;
}
.row-offcanvas-right .sidebar-offcanvas {
right:-250px;
}
.row-offcanvas-right .sidebar-offcanvas.active {
right:0;
}
.row-offcanvas-left .sidebar-offcanvas {
left:-250px;
}
.row-offcanvas-left .sidebar-offcanvas.active {
left:0;
}
.row-offcanvas-right.active {
right:250px;
}
.row-offcanvas-left.active {
left:250px;
}
.sidebar-offcanvas {
display:block;
position:fixed;
width:250px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="author" content="dansek">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Project name</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="/assets/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="/assets/css/font-awesome.min.css" />
<script src="/assets/js/jquery-2.1.3.min.js"></script>
<script src="/assets/js/holder.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.min.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<link href="/assets/css/light-theme-demo.css" rel="stylesheet" />
<script src="/assets/js/dashboard.js"></script>
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<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 id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/dashboard/settings">Settings</a></li>
<li><a href="/dashboard/profile">Profile</a></li>
<li><a href="/dashboard/help">Help</a></li>
<li><a href="/account/signout"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign out</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div class="sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="active"><a href="/dashboard"><i class="fa fa-fw fa-tachometer"></i> Dashboard <span class="sr-only">(current)</span></a></li>
<li><a href="/dashboard/reports"><i class="fa fa-fw fa-file"></i> Reports</a></li>
<li><a href="/dashboard/analytics"><i class="fa fa-fw fa-pie-chart"></i> Analytics</a></li>
<li><a href="/dashboard/export"><i class="fa fa-fw fa-floppy-o"></i> Export</a></li>
<li class="nav-spacer"></li>
<li><a href="/dashboard/users"><i class="fa fa-fw fa-user"></i> Users</a></li>
<li><a href="/dashboard/groups"><i class="fa fa-fw fa-users"></i> Groups</a></li>
<li><a href="/dashboard/permissions"><i class="fa fa-fw fa-unlock-alt"></i> Permissions</a></li>
</ul>
</div>
<div class="main">
<h2 class="page-header">Header</h2>
<p><button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button></p>
</div>
</div>
</div>
</body>
</html>
答案 2 :(得分：0)
11个月后，我能够使用简单的jquery代码完成Bootstrap off画布。这与Jasny bootstrap off canvas extension完全相同。
对于LTR侧栏：
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
jQuery('[data-toggle=offcanvas]').click(function () {
// add this line to change the position of sidebar
jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") : jQuery('.sidebar-offcanvas').css("position","relative");
// end modif
/*$(".content-div").css({"position":"absolute","top":"0"});*/
$(".content-div").toggleClass("postion");
jQuery('.row-offcanvas').toggleClass('active')
});
});
</script>
</head>
<body>
<style>
.main-div{
float:left;
width:100%;
overflow:hidden;
}
@media(max-width:767px){
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
.postion{
position:relative;
margin-left:-50%;
}
}
</style>
<div class="container-fluid">
<div class="row"><h1>Top section</h1></div>
<div class="main-div">
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul>
<li class="activez"><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
<li><a href="#">Link 12</a></li>
<li><a href="#">Link 13</a></li>
<li><a href="#">Link 14</a></li>
<li><a href="#">Link 15</a></li>
<li><a href="#">Link 16</a></li>
<li><a href="#">Link 17</a></li>
<li><a href="#">Link 18</a></li>
<li><a href="#">Link 19</a></li>
<li><a href="#">Link 20</a></li>
<li><a href="#">Link 21</a></li>
<li><a href="#">Link 22</a></li>
<li><a href="#">Link 23</a></li>
<li><a href="#">Link 24</a></li>
<li><a href="#">Link 25</a></li>
<li><a href="#">Link 26</a></li>
<li><a href="#">Link 27</a></li>
<li><a href="#">Link 28</a></li>
<li><a href="#">Link 29</a></li>
<li><a href="#">Link 30</a></li>
<li><a href="#">Link 31</a></li>
<li><a href="#">Link 32</a></li>
<li><a href="#">Link 33</a></li>
<li><a href="#">Link 34</a></li>
<li><a href="#">Link 35</a></li>
<li><a href="#">Link 36</a></li>
<li><a href="#">Link 37</a></li>
<li><a href="#">Link 38</a></li>
<li><a href="#">Link 39</a></li>
<li><a href="#">Link 40</a></li>
<li><a href="#">Link 41</a></li>
<li><a href="#">Link 42</a></li>
<li><a href="#">Link 43</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-9 content-div">
<p class="pull-left hide-p visible-xs">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="row"><h1>Bottom section</h1></div>
</div>
</body>
</html>
从右到左（阿拉伯语等）代码为：
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
jQuery('[data-toggle=offcanvas]').click(function () {
// add this line to change the position of sidebar
jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") : jQuery('.sidebar-offcanvas').css("position","relative");
// end modif
$(".content-div").toggleClass("postion");
jQuery('.row-offcanvas').toggleClass('active')
});
});
</script>
</head>
<body>
<style>
.main-div{
float:left;
width:100%;
overflow:hidden;
}
.postion{
position:relative;
margin-right:-50%;
}
@media(max-width:767px){
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}
</style>
<div class="container-fluid">
<div class="row"><h1>Top section</h1></div>
<div class="main-div">
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9 content-div">
<p class="pull-right hide-p visible-xs">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
</div>
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul>
<li class="activez"><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
<li><a href="#">Link 12</a></li>
<li><a href="#">Link 13</a></li>
<li><a href="#">Link 14</a></li>
<li><a href="#">Link 15</a></li>
<li><a href="#">Link 16</a></li>
<li><a href="#">Link 17</a></li>
<li><a href="#">Link 18</a></li>
<li><a href="#">Link 19</a></li>
<li><a href="#">Link 20</a></li>
<li><a href="#">Link 21</a></li>
<li><a href="#">Link 22</a></li>
<li><a href="#">Link 23</a></li>
<li><a href="#">Link 24</a></li>
<li><a href="#">Link 25</a></li>
<li><a href="#">Link 26</a></li>
<li><a href="#">Link 27</a></li>
<li><a href="#">Link 28</a></li>
<li><a href="#">Link 29</a></li>
<li><a href="#">Link 30</a></li>
<li><a href="#">Link 31</a></li>
<li><a href="#">Link 32</a></li>
<li><a href="#">Link 33</a></li>
<li><a href="#">Link 34</a></li>
<li><a href="#">Link 35</a></li>
<li><a href="#">Link 36</a></li>
<li><a href="#">Link 37</a></li>
<li><a href="#">Link 38</a></li>
<li><a href="#">Link 39</a></li>
<li><a href="#">Link 40</a></li>
<li><a href="#">Link 41</a></li>
<li><a href="#">Link 42</a></li>
<li><a href="#">Link 43</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row"><h1>Bottom section</h1></div>
</div>
</body>
</html>
答案 3 :(得分：0)
你使用stock offcanvass.css遇到的问题是它将画布边栏设置为position:absolute，这有效地将列从页面流中取出并使其覆盖页脚当被拉入视野时。使用以下3个步骤来获得一个不需要额外JS的简单CSS解决方案。
<强> 1。使用静态定位
要获得您想要的结果，即将侧栏保持在文档流中，以便在页面进入视图时强制页脚向下，通过将侧栏设置为{{来覆盖默认的offcanvas CSS 1}}。
<强> 2。设置高度
静态定位会将侧边栏放回文档流中，但这也意味着即使边栏不在画布上，它也会使内容区域与侧边栏一样高。要更正这一点，请将侧边栏设置为position:static，当它在画布外时，并在视图中时返回height:0。
第3。设置宽度和负边距
我还为侧栏设置了一个确定的大小（因此它不会默认为标准的offcanvas.css大小为50％），并使用相等宽度的负左边距将其拉出页面。
将所有内容全部包含在移动屏幕的媒体查询中，您将获得：
height:auto有关完整示例，请参阅this JS Fiddle。我加入了一个Bootstrap导航栏，一个单独的offcanvas切换按钮，只显示侧栏不在画布上，以及一个简单的页脚，以便完整。
P.S。：我应该提一下，这种方法会在侧栏进入视野时立即跳到侧栏高度的底部，有些用户可能不喜欢这样。但是，可以使用CSS过渡和最大高度来动画侧栏的扩展，如this SO post中所示，但结果不太理想。我只提到它，因为它可能是其他人想要使用的东西。就个人而言，我很好，页脚只是瞬间弹出低谷。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？