twitter-bootstrap - Bootstrap Navbar 位于 Carousel 之上

Question

我的导航栏的定位有一点问题。我有我想要的导航栏(在此示例中从顶部稍微分离: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;}

Answer 1

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

Js Fiddle

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

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