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

您可以使用此方法覆盖现有的bootstrap css，您可以使用位置：固定或位置：绝对

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

Here is working codepen example

Answer 3

//让导航栏位于旋转木马顶部。

＆＃13;

.navbar {
position:absolute
}

＆＃13;

//使图像居中并在其上方添加一些填充以补偿导航栏。

＆＃13;

.carousel-inner > .item > img {
    margin: 0 auto;
    padding-top: 50px;
}

＆＃13;

至少为我工作，所以希望它对你（和其他人）有所帮助。欢呼声。

Answer 4

在链接的示例中，他们使用nav .navbar-wrapper外部的包装器，其绝对位置和上边距为20px（当视口宽度大于768px时）。

以下是他们用来使其发挥作用的代码：

.navbar-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 20;
}

.navbar-wrapper .container {
   padding-left: 0;
   padding-right: 0;
}

.navbar-wrapper .navbar {
   padding-left: 15px;
   padding-right: 15px;
}

@media (min-width: 768px) {
  .navbar-wrapper {
    margin-top: 20px;
  }
}

Answer 5

这对我有用：

将轮播放入一个部分中并使其绝对

也使导航栏绝对

    FileNotFoundError: File b'ml-100k/u.user' does not exist

//////// CSS

     <section id="home">
          <div id="carouselExampleIndicators" class="carousel slide" data- 
          ride="carousel">....
    </section>
     //the navbar
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top  mynav" >... 
    </nav>

Answer 6

只需将fixed-top类放在您的<nav>标记内，就应该这样做

看起来像这样

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

Bootstrap Navbar超越Carousel

6 个答案: