Bootstrap Navbar超越Carousel

Question

我的导航栏定位有点问题.我按照我想要的方式使用导航栏(在这个例子中略微偏离顶部:http://getbootstrap.com/examples/carousel/)但是我的旋转木马中的图片在导航栏下方结束.

我希望我的旋转木马中的图片一直延伸到页面顶部,导航栏与旋转木马的上部重叠(如上例所示).我玩过填充物,但最高的我可以将旋转木马图像延伸到导航栏的底部.我已经为下面的导航栏,旋转木马和旋转木马css附加了代码片段.如果提前感谢,任何帮助都会很感激

Navbar代码:

<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(nav和carousel)包装到相对的div中.

Answer 2

您可以使用此命令覆盖现有的引导CSS，可以使用position：fixed或position：absolute

.navbar{
      position:absolute;
      width:100%;
      z-index:10;
      max-width:100%;
}

这是可工作的codepen示例