부트 스트랩 : 회전 목마 휴식 페이지 CSS에 반투명 메뉴 바 오버레이는

Question

내가 부트 스트랩 회전 목마에 투명한 부트 스트랩 네비게이션 바 오버레이를 구현하기 위해 노력하고 그리고 난 문제의 비트가 오전, 난 정확히 내가 원하는 위치에 네비게이션 바에을 얻을 수 있습니다 그런 다음 메뉴 바뿐만 아니라 그 위에 나타납니다 그러나 문제는이 슬라이더 이하이어야한다 페이지 CSS 및 콘텐츠를 나누기 것입니다, 아래에 제공된 코드에 있어야합니다.

CSS : 당신은 메뉴 바의 HTML에서 볼 수 있듯이 나는 단지 난 그냥 내가 그것을 원하는 곳에 위치 탐색을 얻을 때까지 적은 코드를 사용하여 원하는대로 "네비게이션 바 '의 네비게이션 바에 클래스를 추가 한

.navbar-wrapper { 
    position:relative; 
} 
.carousel { 
    position:absolute; 
    top:60px; 
} 
.carousel-inner { 
    width: 100%; 
    overflow: hidden; 
} 
.navbar { 
    position:absolute; 
    top:0; 
    z-index:10; 
    background: rgb(0, 0, 0); opacity: 0.85; 
    width:100%; 
} 

즉, 페이지 나누기 문제가 해결되면 다른 줄을 추가 할 것입니다. 코드를 안팎으로두면 페이지 나누기 문제가 변경되지 않으므로 문제를 일으키는 캐 러셀에 대한 실제 CSS와 관련이 있다고 생각합니다. HTML :

<div class="navbar-wrapper"> 
     <div class="navbar"> 
     </div> 
    </div><!-- /navbar-wrapper --> 


    <!-- simple bootstrap carousel --> 
    <div id="carousel-generic" class="carousel slide small-browser-margins reposition-top" data-ride="carousel"> 

     <ol class="carousel-indicators"> 
      <li data-target="#carousel-generic" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel-generic" data-slide-to="1"></li> 
      <li data-target="#carousel-generic" data-slide-to="2"></li> 
      <li data-target="#carousel-generic" data-slide-to="3"></li> 
     </ol> 

     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="images/image1.jpg" alt="" class="img-responsive"> 
      </div> 
      <div class="item"> 
       <img src="images/image2.jpg" alt="" class="img-responsive"> 
      </div> 
      <div class="item"> 
       <img src="images/image3.jpg" alt="" class="img-responsive"> 
      </div> 
      <div class="item"> 
       <img src="images/image4.jpg" alt="" class="img-responsive"> 
      </div>  
     </div> 
    </div><!-- /#carousel-generic --> 

이미지가 문제의 명확성을 위해 추가 된 모든 텍스트는 회전 목마 이하이어야한다.

Answer 1

오, 친애하는 ... 차 한 잔 사물의 또 다른 모습이 내가, CSS에 아주 작은 변화해야했다 모든이었다

.navbar-wrapper { 
    position:relative; 
} 
.carousel { 
    top:0; 
} 
.carousel-inner { 
    width: 100%; 
    overflow: hidden; 
    } 
.navbar { 
    position:absolute; 
    top:0; 
    z-index:10; 
    background: rgb(0, 0, 0); opacity: 0.85; 
    width:100%; 
} 

을