我正在使用 twitter 引导程序,并且我的导航栏可以正常使用折叠功能。
这是我的html代码:
<div class="subnav">
<ul class="nav nav-pills">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Buttons <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a href="#buttonGroups">Button groups</a></li>
<li class=""><a href="#buttonDropdowns">Button dropdowns</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Navigation <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a href="#navs">Nav, tabs, pills</a></li>
<li class=""><a href="#navbar">Navbar</a></li>
<li class=""><a href="#breadcrumbs">Breadcrumbs</a></li>
<li class=""><a href="#pagination">Pagination</a></li>
</ul>
</li>
<li class=""><a href="#labels">Labels</a></li>
<li class=""><a href="#badges">Badges</a></li>
<li class=""><a href="#typography">Typography</a></li>
<li class=""><a href="#thumbnails">Thumbnails</a></li>
<li class=""><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
<li><a href="#misc">Miscellaneous</a></li>
</ul>
</div>
这是我的bootstrap_and_overrides.css.scss
$iconSpritePath: asset-url('glyphicons-halflings.png', image);
$iconWhiteSpritePath: asset-url('glyphicons-halflings-white.png', image);
@import "bootstrap";
body { padding-top: 40px;
.navbar .brand {padding: 10px 20px; }
background: url("background.png") repeat scroll 0 0 #EEEEEE;
.subnav {
background-color: #EEEEEE;
background-repeat: repeat-x;
border: 1px solid #E5E5E5;
border-radius: 4px 4px 4px 4px;
height: 36px;
.nav > li > a {
border-left: 1px solid #F5F5F5;
border-radius: 0 0 0 0;
border-right: 1px solid #E5E5E5;
margin: 0;
padding-bottom: 11px;
padding-top: 11px;
}
}
.subnav-fixed {
/*important part*/
left: 0;
position: fixed;
right: 0;
top: 40px;
z-index: 1020;
/*design stuff*/
border-color: #D5D5D5;
border-radius: 0 0 0 0;
border-width: 0 0 1px;
box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 5px rgba(0, 0, 0, 0.1);
background-color: #FFFFFF;
}
}
@import "bootstrap-responsive";
这是我的js代码:
$(document).scroll(function(){
// If has not activated (has no attribute "data-top"
if (!$('.subnav').attr('data-top')) {
// If already fixed, then do nothing
if ($('.subnav').hasClass('subnav-fixed')) return;
// Remember top position
var offset = $('.subnav').offset()
$('.subnav').attr('data-top', offset.top);
}
if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())
$('.subnav').addClass('subnav-fixed');
else
$('.subnav').removeClass('subnav-fixed');
});
另外,我正在使用子导航栏,我的问题是我的子导航栏没有折叠。
twitter bootstrap 中正确的子导航栏版本:
我的坏版本不能正常工作:/
我该如何解决这个问题?
谢谢!