如何在twitter bootstrap导航菜单上方放置一个固定的div

use*_*519 13 html css twitter-bootstrap twitter-bootstrap-3

我想在twitter自举导航菜单上面放置一个div,Intro是我要在菜单上方显示的div,必须修复.问题是我在菜单上放置了一个背景图像,但它也显示了Intro div 上的背景图像,我想在Intro div 之后显示背景图像.请帮我解决这个问题.

<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;
}
Run Code Online (Sandbox Code Playgroud)

moo*_*ive 21

移动<div id="Intro">到导航栏代码上方:

<div id="Intro">
This is page is created with bootstrap
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
Run Code Online (Sandbox Code Playgroud)

在导航栏固定的顶部添加一些空间:

.navbar-fixed-top {
  top: 20px;
Run Code Online (Sandbox Code Playgroud)

将此尺寸设为您想要的高度 <div id="Intro">

添加其他样式 <div id="Intro">

#Intro {
  top: 0;
  position: fixed;
Run Code Online (Sandbox Code Playgroud)

编辑: 介绍div的附加样式.为介绍div添加一些尺寸和背景颜色.试试这个 :

 #Intro {
     top: 0;
     position: fixed;
     background-color: #fff;
     height: 40px;
     width: 100%;

  }
Run Code Online (Sandbox Code Playgroud)