基本 Bootstrap 模板 here顶部有一个固定栏。我想放置一个div
就在它的下面。
这是该栏的 HTML(直接从页面源复制,因此有 CSS 类引用):
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="brand">Project name</a>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input type="text" placeholder="Email" class="span2">
<input type="password" placeholder="Password" class="span2">
<button class="btn" type="submit">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
这是我对 div
的尝试转到它下面:
<div style="background-color:#CF4342;color:#fff;top:40px;margin:0 auto;position:fixed;z-index:5000; width:50px;">Hello</div>
它几乎可以工作,但问题是“top:40px;”。当您调整屏幕大小时,顶部的固定栏会改变高度。
如何使其始终位于栏的正下方,无论栏的高度如何?关于如何在不使用 <center>
的情况下水平居中的奖励积分
编辑:对于水平居中的事情,我尝试将我的 div 包装在宽度为 100% 的 div 中,然后向其添加“margin:0 auto”,但这不适用于固定位置
编辑2:here是jsfiddle。 html 的第 38 行是我的尝试,上面的所有内容都是导航栏 div。
最佳答案
如果您已经在使用 jQuery,您可以使用如下内容:
<强> Working Example
x = (function() {
var t = $('.navbar').height();
var c = $(window).width() / 2 - $('.new').width() / 2;
$('.new').css({
top: t,
left: c
});
});
$(document).ready(x);
$(window).resize(x);
注意:使用媒体查询更新了示例,以更好地显示脚本的效果。
当然,您可以单独使用 CSS 来完成此操作,但您需要使用媒体查询,如下所示:
.new {
position:fixed;
margin: 0 auto;
top: 51px;
left:0;
right:0;
background-color:#CF4342;
color:#fff;
z-index:5000;
width:50px;
}
@media (max-width: 979px) {
.new {
top: 61px;
}
}
请注意,如果您将屏幕缩小得太远,仅使用 css 的解决方案将会“中断”。 jQuery 解决方案不会有这个问题。
关于html - 固定 div 相对于父 div 的位置为 'top',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17262093/