我有侧栏和导航栏的示例代码和Bootstrap。
我不知道如何在导航栏中添加侧边栏相同的行。
像这样:
sidebar logo navbar {item 1, item 2, item 3}
那意味着
我的笔在http://codepen.io/r0ysy0301/pen/MbYzpE
它只显示导航栏,而不显示任何类似按钮的切换按钮以打开侧边栏。
答案 0 :(得分:1)
使用侧栏实施here检查这个简单的引导程序。
<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 text-center" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Item 1</a></li>
<li><a href="#about">Item 2</a></li>
<li><a href="#contact">Item 3</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="custom-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>
</ul>
</div>
<!--/.well -->
</div>
<!--/span-->
<div class="col-xs-12 col-sm-9">
<br>
<div class="jumbotron">
<a href="#" class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
<h1>Hello, world!</h1>
<p>dajsdnaksjndkajsndkjas</p>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>Section</h2>
<p>asdkasdkmaskdmaskdmkasmdkwuidnjdnajdjkansdjkasndjkasndkajsndkajsndkajsndkjasd</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>© Footer here</p>
</footer>
</div>
<!--/.container-->
CSS:
body {
padding-top: 50px;
}
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;
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;
}
}
#custom-sidebar {
padding:15px;
z-index: 1000;
margin-top: -56px;
background: #fff;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index:3;
}
.navbar {
z-index: 200;
}
脚本:
$(function(){
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});