您好我正在使用带两个不同导航栏的引导程序,一个用于大屏幕,另一个用于手机大小的屏幕。
网址:http://www.gamingonlinux.com/
两个导航栏的代码:
<!-- navbar -->
<div class="hidden-xs">
<div class="container">
<div class="navbar navbar-fixed-top {:inverse}" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/" style="padding-top: 0px; padding-bottom: 0px;"><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></a></li>
<li><a href="/">Home</a></li>
<li><a href="/donate/">Donate</a></li>
<li><a href="/sales/">Sales</a></li>
<li><a href="/contact-us/">Submit Tip</a></li>
<li><a href="/crowdfunding/">Wiki</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forum <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/forum/">Forum</a></li>
<li><a href="/community/">Community Page</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
{:user_menu}
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span><b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><form method="get" action="/index.php?module=search" class="navbar-form" role="search">
<input type="hidden" name="module" value="search">
<input type="text" class="form-control" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- navbar phone screens -->
<div class="visible-xs">
<div class="container">
<div class="navbar navbar-fixed-top {:inverse}" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span><b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><form method="get" action="/index.php?module=search" class="navbar-form" role="search">
<input type="hidden" name="module" value="search">
<input type="text" class="form-control" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
{:user_menu}
</ul>
</li>
</ul>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="/"><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/donate/">Donate</a></li>
<li><a href="/sales/">Sales</a></li>
<li><a href="/contact-us/">Submit Tip</a></li>
<li><a href="/crowdfunding/">Wiki</a></li>
<li><a href="/forum/">Forum</a></li>
<li><a href="/community/">Community Page</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="contentwrap">
<div class="container">
<div class="add-bottom-margin">
<!-- image carousel -->
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
{:carousel_list}
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /.carousel -->
</div>
然后这个JS代码用于计算&#34; contentwrap&#34;的正确位置。确保它直接位于导航栏之后,它可以在我们的普通导航栏上工作,但不能在奇怪的小屏幕导航栏上工作:
jQuery(document).ready(function() {
$('.contentwrap').css({
'margin-top': (($('.navbar-fixed-top').height()) + 1) + 'px'
});
$(window).resize(function() {
$('.contentwrap').css({
'margin-top': (($('.navbar-fixed-top').height()) + 1) + 'px'
});
});
});
我是否遗漏了为什么它不能在visible-xs导航栏上工作?
作为参考,JS代码来自这篇文章twitter bootstrap navbar fixed top overlapping site,有些人使用它。
答案 0 :(得分:2)
由于“tmg”
的评论,我设法修复了它我为每个导航栏添加了一个id,然后将它们添加到一起,它非常简单并且完美无缺。
$('.contentwrap') .css({'margin-top': (($('#nav-small').height() + $('#nav-normal').height()) + 1 )+'px'});
$(window).resize(function()
{
$('.contentwrap') .css({'margin-top': (($('#nav-small').height() + $('#nav-normal').height()) + 1 )+'px'});
});
答案 1 :(得分:0)
$('.navbar-fixed-top').height()
这个类有2个元素。 上面的代码计算第一个元素的高度,在相同的屏幕情况下等于零
计算元素高度的摘要
var calcHeights = function (elements) {
var r = 0;
elements.each(function () {
r += $(this).height();
});
return r;
}
而不是$('.navbar-fixed-top').height()
使用calcHeights($('.navbar-fixed-top'))
答案 2 :(得分:0)
不需要任何jQuery粘合剂的建议:
将navbar-fixed-top
更改为navbar-top
,不要放置导航栏
在.container。
然后内容应该在导航栏后开始。 (调整导航栏和内容 相应的利润率)