twitter-bootstrap - Bootstrap Navbar overtop Carousel

我的导航栏的位置有一个小问题。我的导航栏是我想要的方式(与本例类似，从顶部分离出来:http://getbootstrap.com/examples/carousel/)，但轮播中的图片在导航栏下方。

我希望轮播中的图片一直延伸到页面顶部，并且导航栏与轮播的上部重叠(如上例所示)。我玩过填充，但是可以将轮播图像扩展到的最高点是导航栏的底部。我在下面附加了导航栏，轮播和轮播CSS的代码段。任何帮助将不胜感激，在此先感谢

导航栏代码:

<div class="container">
  <div class="navbar navbar-inverse" role="navigation">  <!navbar-inverse is black, navbar-default is grey>


    <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>
      <a class="navbar-brand">Derby Days 2014</a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Events <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Penny Wars</a></li>
            <li><a href="#">Wonderful Wednesday</a></li>
            <li><a href="#">Lip Sync</a></li>
            <li><a href="#">Concert</a></li>
          </ul>
        </li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div><!--/.nav-collapse -->
   </div>
</div>

轮播代码:



































轮播的CSS代码:

.carousel {position: relative;}

.carousel-inner {position: relative; width: 100%; overflow: hidden;}

最佳答案

我相信这是您要实现的目标？

Js Fiddle

.bannerContainer {
    position:relative;
}
.carousel {
    position:absolute;
    top:0;
}
.navbar {
    position:absolute;
    top:30px;
    z-index:10;
    background:#fff;
    width:100%;
}

您要将绝对定位的div(导航和轮播)包装到相对的div中。

关于twitter-bootstrap - Bootstrap Navbar overtop Carousel，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21174344/