Navbar가 회전식 이미지로 자릅니다.

문제가 발생하여 다음 단계가 확실하지 않은 것 같습니다. 나는 위치, 여백, 패딩 등으로 CSS 벽에 머리를 맞 혔다 고 생각합니다.Navbar가 회전식 이미지로 자릅니다.

내 탐색 막대 아래로 회전 장치를 옮기고 둘 다 고정시켜야합니다. 아이디어가 있습니까?

코드 :

.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

출처

2017-04-07 peterbehere

당신은 당신이 – Sarah

아마 당신은 당신의 코드에서 네비게이션 바에을 포함해야 도움이 다른 사람을 도움이 될 https://jsfiddle.net/ 또는 https://codepen.io/이 무엇인지의 일 예. –

고마워요. 나는 갱신 할 것이다. – peterbehere

UPDATE : 나는 그것을 알아 냈어! 첫째, 내 이미지를 가리키는 CSS를 완전히 제거했습니다. 그런 다음, html img 클래스를 rails image_tag helper로 대체했습니다. 이제 작동합니다!

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

출처

2017-04-13 00:53:37 peterbehere

Navbar가 회전식 이미지로 자릅니다.

답변

관련 문제