web-dev-qa-db-ja.com

Bootstrap Navbar overtop Carousel

ナビゲーションバーの配置に少し問題があります。私は希望する方法でnavbarを持っています（この例のように少し上から外します： http://getbootstrap.com/examples/carousel/ ）が、カルーセル内の画像はnavbarの下で終わります。

カルーセル内の画像をページの一番上まで伸ばし、ナビゲーションバーをカルーセルの上部に重ねます（上記の例のように）。私はパディングをいじりましたが、カルーセル画像を拡張するために取得できる最高のものは、ナビゲーションバーの下部です。以下に、navbar、carousel、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;}
twitter-bootstraptwitter-bootstrap-3carouselnavbar
7
Caleb Addington

これはあなたが達成しようとしていることだと思いますか？

Js Fiddle

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

絶対配置されたdiv（ナビとカルーセル）を相対であるdivにラップしたい。

9
Jamie Collingwood

既存のbootstrap cssをこれで上書きできます。position：fixedまたはposition：absolute

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

これが実用的なコードペンの例です

5
Nikhil Raj A

//ナビゲーションバーをカルーセルの上に配置します。

.navbar {
position:absolute
}

//画像を中央に配置し、ナビゲーションバーを補正するために画像の上に少しパディングを追加します。

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

少なくとも私のために働いたので、ここでそれがあなた（そして他の人）を助けることを願っています。乾杯。

2
Some Guy

ここに私のために働いたものがあります：

  1. カルーセルをセクションに入れて、絶対的なものにする

  2. ナビゲーションバーも絶対にします

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

//////// CSS

.mynav{
    position: absolute;
  }
.home{
    position: absolute;
}
0
Eljeddi Oussema

リンクされた例では、絶対配置と上部余白が20pxのnav .navbar-wrapper外のラッパーを使用しました（ビューポートの幅が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;
  }
}
0
denoise