Html 如何在 twitter bootstrap 导航菜单上方放置一个固定的 div
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21609081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place a fixed div above twitter bootstrap nav menu
提问by user3026519
I want to place a div above a twitter bootstrap navigation menu, Introis the div that I want to display above the menu which must be fixed. The issue is I have placed a background image on the menu, but it shows the background image on the Introdiv as well, I want to display the background image after the Introdiv. Please help me solve this issue.
我想在 twitter 引导导航菜单上方放置一个 div,Intro是我想在菜单上方显示的 div,必须修复。问题是我在菜单上放置了一个背景图像,但它也在Introdiv 上显示了背景图像,我想在Introdiv之后显示背景图像。请帮我解决这个问题。
<div class="navbar navbar-inverse navbar-fixed-top">
<div id="Intro">
This is page is created with bootstrap
</div>
<div class="container">
<div class="navbar-header">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="home.aspx"> Home</a> </li>
<li><a href="contact.aspx"> Contact</a> </li>
</ul>
</div>
</div>
.navbar-inverse {
background-color : #fffff;
border-color:transparent;
background: #ffffff;
url('bgimg.gif') repeat-x;
}
回答by moodyjive
Move <div id="Intro">
above the navbar code:
移至<div id="Intro">
导航栏代码上方:
<div id="Intro">
This is page is created with bootstrap
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
Add some space on top of navbar-fixed:
在导航栏固定的顶部添加一些空间:
.navbar-fixed-top {
top: 20px;
Make this size the height you want for <div id="Intro">
将此尺寸设为您想要的高度 <div id="Intro">
Add additional styling to <div id="Intro">
添加额外的样式 <div id="Intro">
#Intro {
top: 0;
position: fixed;
EDITED:Additional styling for intro div. Add some dimensions and background color to intro div. Try this :
编辑:介绍 div 的附加样式。添加一些尺寸和背景颜色来介绍 div。尝试这个 :
#Intro {
top: 0;
position: fixed;
background-color: #fff;
height: 40px;
width: 100%;
}