Bootstrap Navbar旋转木马 [英] Bootstrap Navbar overtop Carousel

问题描述

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

Having a slight problem with the positioning of my navbar. I have my navbar the way I would like (detached from the top slightly like in this example: http://getbootstrap.com/examples/carousel/) but the pictures in my carousel end below the navbar.

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

I would like for the pictures in my carousel to extend all the way to the top of the page and have the navbar overlapping the upper portion of the carousel (like in the example above). I've played around with the padding but the highest I can get the carousel images to extend to are the bottom of the navbar. I've attached the code snippets for the navbar, carousel and carousel css below. Any help would be appreciate, thanks in advance

导航栏代码:

<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;}

推荐答案

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

I believe this is what you are trying to achieve?

Js小提琴

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

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

You want to wrap absolute positioned divs (nav and carousel) into a div that is relative.

这篇关于Bootstrap Navbar旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！