目前在我的网站上,我使用始终位于屏幕顶部的 Bootstrap 导航栏(即使在您滚动时)。
在它的正下方,我有一个图像轮播,通过给页面顶部填充将其推到下方,将其推到下方。
问题是这主要是猜测,因为导航栏的高度随字体大小而变化,在我的大字体上它与轮播重叠,但在小字体上它没问题。
有没有办法让旋转木马直接位于导航栏下方而没有间隙,如果导航栏由于更大的字体而变大以将其向下推得更多?我从不希望有重叠或差距。
对于普通的导航栏来说这不是问题,因为元素会紧挨着放置,但由于这是固定顶部的导航栏,所以有点尴尬。
网址:http://www.gamingonlinux.com/
代码:
<!-- navbar -->
<div class="col-md-12">
<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>
<div class="container">
<div class="col-md-12">
<div class="row add-bottom-margin">
<!-- image carousel -->
<div id="carousel-example-generic" 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>
</div>
最佳答案
我在别处找到了答案,不是强行指定一个特定的间隙,而是用js计算并设置:
jQuery(document).ready(function () {
$('.contentwrap').css({
'margin-top': (($('.navbar-fixed-top').height()) + 0) + 'px'
});
$(window).resize(function () {
$('.contentwrap').css({
'margin-top': (($('.navbar-fixed-top').height()) + 0) + 'px'
});
});
});
关于javascript - 在导航栏正下方制作 Bootstrap 轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26151380/