각 부트 스트랩 회전식 슬라이드에서 캡션의 위치를 ​​변경하는 방법은 무엇입니까?

Question

이것은 내가 생각하는 일반적인 질문입니다. 부트 스트랩을 사용하여 캐 러셀/슬라이더를 만들고 각 슬라이드의 캡션을 배치하는 방법을 알고 싶습니다. 나는 운이없는 클래스와 함께 가고 캐 러셀 캡션을 변경하여 id : "carousel-caption1"이 완전히 영향을 미치도록 시도했다. 예를 들어 가운데에 캡션 하나, 맨 아래에 하나, 맨 위에 하나 등의 캡션을 각 슬라이드에서 어떻게 바꿀 수 있습니까?

편집 : 코드는 다음과 같습니다. 내 회전 목마와 펜.

http://codepen.io/lubidia13/pen/MbQvOa

<div class="container"> 

<header> 
    <img class="banner" src="http://placehold.it/1349x150"> 
    <div class="gender"> 
    <h3> Gender Identity </h3> 
    </div> 
</header> 

<div id="wrap"> 

<div id="tabwrap"> 
    <ul id="tabs"> 
    <li > 
    <a href="#bacon" class="cyan">Terms</a> 
    </li> 

    <li> 
    <a href="#batfish" class="green">Resources</a> 
    </li> 

    <li> 
    <a href="#tuna" class="lav">Culture</a> 
    </li> 

    <li> 
     <a href="#sausage" class="teal">Share</a> 
    </li> 

    </ul> 

    <div id="content"> 
    <div id="bacon" class="animated"> <p>Bacon ipsum dolor amet ribeye short loin leberkas andouille jerky meatloaf pork spare ribs corned beef. Andouille ham hock ground round, shankle pastrami rump hamburger filet mignon. </p></div> 
    <div id="batfish" class="animated"><p>Batfish warmouth orbicular combtooth blenny; madtom, knifefish handfish rock beauty armorhead frogfish. Cownose ray pupfish pencilfish char fangtooth marblefish longfin dragonfish armored searobin hamlet.</p></div> 
    <div id="tuna" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey triggerfish mooneye African glass catfish, loach wolf-eel yellowhead jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p></div> 
    <div id="sausage" class="animated"> <p>Sausage ground round sirloin ham hock t-bone tongue strip steak meatloaf landjaeger shankle andouille. Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip chicken.</p> 
    </div> <!-- End of Div--> 
    </div> <!-- End of Div--> 
    </div><!-- End of Div--> 


    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="4"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <img src="https://unsplash.it/1250/750?image=114"> 
     </div> 
     <div class="item"> 
     <img src="http://placehold.it/1250x750"> 
     </div> 
     <div class="item"> 
     <img src="https://unsplash.it/1250/750?image=315"> 
     </div> 
     <div class="item"> 
     <img src="https://unsplash.it/1250/750?image=622"> 
     </div> 


    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 

    <!-- Delete This --> 
<footer class="info"> 
    <a href="#"> Home</a> | 
    <a href="#"> Terms </a> | <a href="#">Media</a> | <a href="#">Share</a> 

    <p | 2016 | Web Design</p> 
</footer> 
    <!-- End of Container --> 

Answer 1

나의 제안은 다음이 class = "carousel-caption my-caption"

처럼 "회전 목마 캡션"옆에 자신의 사용자 정의 클래스를 추가하면 U가 원하는