Javascript 如何在一行中添加引导边栏和导航栏?
我有带引导的边栏和导航栏的示例代码 我不知道如何在导航栏中添加同一行的边栏 像这样:Javascript 如何在一行中添加引导边栏和导航栏?,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我有带引导的边栏和导航栏的示例代码 我不知道如何在导航栏中添加同一行的边栏 像这样: sidebar logo navbar {item 1, item 2, item 3} 那意味着 我的钢笔在 它只显示导航栏,不显示任何类似切换按钮的按钮来打开侧栏。使用侧栏实现检查这个简单的引导 脚本: $(function(){ $('[data-toggle=offcanvas]').click(function() { $('.row-offcanvas').toggleC
sidebar logo navbar {item 1, item 2, item 3}
那意味着
我的钢笔在
它只显示导航栏,不显示任何类似切换按钮的按钮来打开侧栏。使用侧栏实现检查这个简单的引导 脚本:
$(function(){
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
您需要调整默认的导航栏。阅读引导网格布局文档在左面板中,我想在折叠菜单中添加一个图标。单击它可以打开或关闭此面板。那么您的意思是顶部的侧边栏将是一个可切换的图标?是的,像这样。当我点击
fabar
时,它将滑出一个边栏。正常,它仅显示图标fa栏
。
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');
});
});