Navbarがカルーセル画像に切り込む

Question

問題があり、次のステップがわからないようです。私は、ポジション、マージン、パディングなどを使って自分の頭をCSSの壁にぶつけたと思う。

私のカルーセルをナビバーの下に移動して、それらの両方を固定しておく必要があります...アイデアはありますか？

コード：

.carousel-inner .carousel-item { 
 
    width: 100%; 
 
    height: 500px; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.hero1 { 
 
    background: url(hero.jpg) no-repeat center center fixed; 
 
} 
 
.hero2 { 
 
    background: url(hero2.jpg) no-repeat center center fixed; 
 
} 
 
.hero3 { 
 
    background: url(hero3.jpg) no-repeat center center fixed; 
 
} 
 

 
.navbar { 
 
    font-family: "Helvetica Neue", Helvetica; 
 
    font-weight: 200; 
 
    box-shadow: 0px 1px 3px #2a2a2a; 
 
} 
 

 
.navbar-inverse a.navbar-brand { 
 
    font-family: "Helvetica Neue", Helvetica; 
 
    font-weight: 100; 
 
    color: white; 
 
}

<div id="carousel" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
     <li data-target="#carousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel" data-slide-to="1"></li> 
 
     <li data-target="#carousel" data-slide-to="2"></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
     <div class="carousel-item hero1 active"> 
 
      <img class="d-block img-fluid"> 
 
     </div> 
 
     <div class="carousel-item hero2"> 
 
      <img class="d-block img-fluid"> 
 
     </div> 
 
     <div class="carousel-item hero3"> 
 
      <img class="d-block img-fluid"> 
 
     </div> 
 
     </div> 
 
     <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
 
     <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
     </a> 
 
    </div>

https://github.com/peterbehere/christ_the_king_fellowship_app.git

Answer 1

UPDATE：私はそれを考え出しました！まず、自分のイメージを指し示すCSSを完全に削除しました。次に、html imgクラスをrailsのimage_tagヘルパーに置き換えました。これは今動作します！

<div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <%= image_tag "hero.jpg", :id =>"hero1", :class =>"d-block img-fluid" %> 
    </div> 
    <div class="carousel-item"> 
     <%= image_tag "hero2.jpg", :id =>"hero2", :class =>"d-block img-fluid" %> 
    </div> 
    <div class="carousel-item"> 
     <%= image_tag "hero3.jpg", :id =>"hero3", :class =>"d-block img-fluid" %> 
    </div>