Bootstrap Off帆布显示完整高度 [英] Bootstrap Off Canvas Show Full Height
本文介绍了Bootstrap Off帆布显示完整高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里是bootply代码示例：
当你点击手风琴时，在手机上显示的内容是
，而不是推下页脚但隐藏在页面后面的问题。
这是完整的code：
<！doctype html> < html lang =en> < HEAD>
< link href =http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css =stylesheet> < script type =text / javascriptsrc =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 *风格调整*
--------------------------------------- ----------- * / body {padding-top：70px; } footer {padding-left：15px; padding-right：15px; }
/ * *关闭画布* ----------------------------------- ---------------
* / @media screen和（max-width：768px）{.row-offcanvas {
position：relative;
-webkit-transition：全部0.25s缓解;
-moz-transition：全部0.25s缓解;
转换：全部0.25s缓解; }
.row-offcanvas-left .sidebar-offcanvas {
left：-50％; }
.row-offcanvas-left.active {
left：50％; }
.sidebar-offcanvas {
position：absolute;
top：0;
宽度：50％;
margin-left：12px; }}< / style>
< / head> <身体GT; < div class =navbar navbar-fixed-top navbar-inverserole =navigation> < div class =container>
< div class =navbar-header>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< a class =navbar-brandhref =＃>项目名称< / a>
< / div>
< div class =collapse navbar-collapse>
< ul class =nav navbar-nav>
< li class =active>< a href =＃>主页< / a>< / li>
< li>< a href =＃about>关于< / a>< / li>
< li>< a href =＃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-offcanvasid =sidebarrole =navigation>
< p class =visible-xs>
< button type =buttonclass =btn btn-primary btn-xsdata-toggle =offcanvas>< i class =glyphicon glyphicon-chevron-left>< / I>< /按钮>
< / p>
< div class =well sidebar-nav>
< ul class =nav>
< li>边栏< / li>
< li class =active>< a href =＃>连结< / a>< / li>
< li>< a href =＃>连结< / a>< / li>
< li>< a href =＃>连结< / a>< / li>
< li>< a href =＃>连结< / a>< / li>
< li>边栏< / li>
< li>< a href =＃>连结< / a>< / li>
< li>< a href =＃>连结< / a>< / li>
< li>< a href =＃>连结< / a>< / li>
< li>< a href =＃>连结< / a>< / li>
< li>边栏< / li>
< li>< a href =＃>连结< / a>< / li>
< li>< a href =＃>连结< / a>< / li>
< li>< a href =＃>连结< / a>< / li>
< / ul>
< div class =accordionid =accordion2>
< div class =accordion-group>
< div class =accordion-heading>
< a class =accordion-toggledata-toggle =collapsedata-parent =＃accordion2href =＃collapseOne>
可折叠的组别项目＃1 $ b $ b< / a>
< / div>
< div id =collapseOneclass =accordion-body collapse>
< div class =accordion-inner>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
< / div>
< / div>
< / div>
< div class =accordion-group>
< div class =accordion-heading>
< a class =accordion-toggledata-toggle =collapsedata-parent =＃accordion2href =＃collapseTwo>
可折叠组项目＃2
< / a>
< / div>
< div id =collapseTwoclass =accordion-body collapse>
< div class =accordion-inner>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< br>
侧边栏文字...< 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 =buttonclass =btn btn-primary btn-xsdata-toggle =offcanvas>切换导航< / button>
< / p>
< div class =jumbotron>
< h1> Hello，world！< / h1>
< p>这是一个显示Bootstrap中offcanvas布局模式潜力的例子。尝试使用一些响应范围的视口尺寸以查看它的实际效果。< / p>
< / div>
< div class =row>
< div class =col-6 col-sm-6 col-lg-4>
< h2>标题< / h2>
< p> Bootstrap是一个前端框架，它使用CSS和JavaScript来促进响应式Web设计。 Bootply是Bootstrap的一个游乐场，它使开发人员和设计人员能够使用Bootstrap友好的HTML，CSS和Javascript来测试，制作原型并创建模型。< / p>
< p>< a class =btn btn-defaulthref =＃>查看详情»< / a>< / p>
< / div><！ - / span - >
< div class =col-6 col-sm-6 col-lg-4>
< h2>标题< / h2>
< p> Bootply是Bootstrap的一个游乐场，它使开发人员和设计人员能够使用Bootstrap友好的HTML，CSS和Javascript测试，原型和创建模型。 Bootstrap是一个使用CSS和JavaScript来促进响应式Web设计的前端框架。 < / p为H.
< p>< a class =btn btn-defaulthref =＃>查看详情»< / a>< / p>
< / div><！ - / span - >
< div class =col-6 col-sm-6 col-lg-4>
< h2>标题< / h2>
< p> Bootstrap是一个前端框架，它使用CSS和JavaScript来促进响应式Web设计。 Bootply是Bootstrap的一个游乐场，它使开发人员和设计人员能够使用Bootstrap友好的HTML，CSS和Javascript来测试，制作原型并创建模型。< / p>
< p>< a class =btn btn-defaulthref =＃>查看详情»< / a>< / p>
< / div><！ - / span - >
< div class =col-6 col-sm-6 col-lg-4>
< h2>标题< / 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为H.
< p>< a class =btn btn-defaulthref =＃>查看详情»< / a>< / p>
< / div><！ - / span - >
< div class =col-6 col-sm-6 col-lg-4>
< h2>标题< / h2>
< p> Bootstrap是一个前端框架，它使用CSS和JavaScript来促进响应式Web设计。 Bootply是Bootstrap的一个游乐场，它使开发人员和设计人员能够使用Bootstrap友好的HTML，CSS和Javascript来测试，制作原型并创建模型。< / p>
< p>< a class =btn btn-defaulthref =＃>查看详情»< / a>< / p>
< / div><！ - / span - >
< div class =col-6 col-sm-6 col-lg-4>
< h2>标题< / h2>
< p> Bootstrap是一个前端框架，它使用CSS和JavaScript来促进响应式Web设计。 Bootply是Bootstrap的一个游乐场，它使开发人员和设计人员能够使用Bootstrap友好的HTML，CSS和Javascript来测试，制作原型并创建模型。< / p>
< p>< a class =btn btn-defaulthref =＃>查看详情»< / a>< / p>
< / div><！ - / span - >
< / div><！ - / row - >
< / div><！ - / span - >
< / div><！ - / row - >
< / div><！ - /。container - >
< div class =>
< nav class =navbar navbar-inverse navbar-sticky-bottomrole =navigation>
< div class =row-fluidstyle =padding-top：1em;>
< div class =col-md-3 col-sm-6 col-xs-12>
< ul class =list-unstyled>
< li>< a href =＃>家庭及LT; / A>< /锂>
< li>< a href =＃class =navbar-link> Ccontact_us< / A>< /锂>
< li>< a href =＃class =navbar-link>公告及LT; / A>< /锂>
< li>< a href =＃class =navbar-link> About_us< / A>< /锂>
< / ul>
< / div>
< div class =col-md-3 col-sm-6 col-xs-12>
文本和链接
< / div>
< div class =col-md-3 col-sm-6 col-xs-12>
< p class =navbar-text>文字和链接< / p>
< / div>
< div class =col-md-3 col-sm-6 col-xs-12>
< p class =navbar-text>版权< / p>
< / div>
< / div><！ - row - >
< / nav> < / DIV>
< script> $（document.ready）（function（）{
$（'[data-toggle = offcanvas]'）。click（function（）{
$（'。row-offcanvas'）。toggleClass 'active'）;
}）;}）; < /脚本>
< / body> < / HTML>
我觉得这个CSS的问题：
.sidebar-offcanvas {
position：absolute;
top：0;
宽度：50％;
margin-left：12px;
}
我发现了这个建议，但没有解决问题：
$（document）.ready（function（）{
$（'[data-toggle = offcanvas]'）。click（function （）。
$（'。row-offcanvas'）。hasClass（active）？$（'。sidebar-offcanvas'）.css（position，absolute）：$（'。sidebar （'position'，'relative'）;
$（'。row-offcanvas'）。toggleClass（'active'）;
}）;
}） ;
解决方案
我正在努力实现同样的目标。这是我如何解决它。
基本上我认为不同的是我改变了CSS中的.row-offcanvas和.sidebar-offcanvas的位置。我将.sidebar-offcanvas.active中的左侧和右侧设置为0。
$ b
'[data-toggle = offcanvas]'）。click（function（）{$（'。row-offcanvas'）。toggleClass（'active'）; $（'。sidebar-offcanvas'）。toggleClass（'active'） ; return false;}）;}）;
/ * * *基础结构* / body {overflow-x：hidden; padding-top：50px;} / ** *顶部导航* /。navbar-fixed-top {border：0;}。sidebar-offcanvas {background-color：＃f5f5f5; border-right：1px solid #eee;底部：0;显示：块;左：0;位置是：固定;溢出 - X：隐藏;溢出-Y：汽车;顶部：50像素;过渡：全部.25s缓进;宽度：250像素; z-index：1000;}。main {left：250px;填充：20像素;填充左：40像素;填充右：40像素;位置：绝对的; width：calc（100％ - 250px）;}。main .page-header {margin-top：0;} @ media screen and（max-width：768px）{.main {left：0;填充：20像素;位置：相对;宽度：100％; } .row-offcanvas {position：relative;过渡：全部.25s缓进; } .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;位置是：固定;宽度：250像素; }}
<！DOCTYPE html>< html lang =en>< head>< meta charset =utf-8>< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1><< ; meta name =descriptioncontent =>< meta name =authorcontent =dansek>< meta name =viewportcontent =width = device-width; initial-scale = 1.0 >< title>项目名称< / title><！ - Bootstrap - >< link rel =stylesheethref =/ assets / css / bootstrap.min.css/>< link rel =stylesheethref =/ assets / css / bootstrap-theme.min.css/>< link rel =stylesheethref =/ 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和Respond.js for IE8支持HTML5元素和媒体查询 - ><！ - 警告：如果y，Respond.js不起作用通过文件查看页面：// - ><！ - [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 < / script><！ - 替换favicon.ico&在你的域的根目录下的apple-touch-icon.png并删除这些引用 - >< link rel =shortcut iconhref =/ favicon.ico>< link rel =apple-touch- iconhref =/ apple-touch-icon.png>< / head>< body>< nav class =navbar navbar-inverse navbar-fixed-top> < div class =container-fluid> < div class =navbar-header> < button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃navbararia-expanded =falsearia-controls =navbar> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < a class =navbar-brandhref =＃>项目名称< / a> < / DIV> < div id =navbarclass =navbar-collapse collapse> < ul class =nav navbar-nav navbar-right> < li>< a href =/ dashboard / settings>设置< / a>< / li> < li>< a href =/ dashboard / profile>个人资料< / a>< / li> < li>< a href =/ dashboard / help>帮助< / a>< / li> < li>< a href =/ account / signout>< span class =glyphicon glyphicon-offaria-hidden =true>< / span>退出< / a>< / li> < / UL> < form class =navbar-form navbar-right> < input type =textclass =form-controlplaceholder =Search ...> < /形式> < / DIV> < / div>< / nav>< div class =container-fluid> < div class =row row-offcanvas row-offcanvas-left> < div class =sidebar-offcanvasid =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>报告和LT; / A>< /锂> < li>< a href =/ dashboard / analytics>< i class =fa fa-fw fa-pie-chart>< / i>分析与LT; / A>< /锂> < li>< a href =/ dashboard / export>< i class =fa fa-fw fa-floppy-o>< / i>出口与LT; / A>< /锂> < li class =nav-spacer>< / li> < li>< a href =/ dashboard / users>< i class =fa fa-fw fa-user>< / i>用户和LT; / A>< /锂> < li>< a href =/ dashboard / groups>< i class =fa fa-fw fa-users>< / i>组和LT; / A>< /锂> < li>< a href =/ dashboard / permissions>< i class =fa fa-fw fa-unlock-alt>< / i>权限< / A>< /锂> < / UL> < / DIV> < div class =main> < h2 class =page-header>标头< / h2> < p>< button type =buttonclass =btn btn-primary btn-xsdata-toggle =offcanvas>切换nav< / button>< / p> < / DIV> < / div>< / body>< / html>
I am trying to use Bootstrap off canavas left side bar to toggle on small devices.
here is the bootply code example:
The problem when displaying on mobile when you click on the accordion the contents are not pushing the footer down but hides behind it.
Here is the full code:
<!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>
I think the problem with this css :
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%;
margin-left: 12px;
}
I found this suggestion but did not solve the issue:
$(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');
});
});
解决方案
I was trying to achieve the same thing you were. Here is how I solved it.
Basically I think the difference is that I change the position of both the .row-offcanvas and .sidebar-offcanvas in the CSS. I set the left and right to 0 on the .sidebar-offcanvas.active
$(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>
这篇关于Bootstrap Off帆布显示完整高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
