各ブートストラップカルーセルスライドのキャプションの位置を変更するにはどうすればよいですか？

Question

これは私が推測する一般的な質問です。私はブートストラップを使ってカルーセル/スライダーを作成しています。スライドの各スライドのキャプションをどのように配置するかを知りたいのですが。私は幸運のないクラスと一緒に行くためにidを作成しようとしました。そして、 "carousel-caption1"がそれに完全に影響を与えるようにカルーセルのキャプションを変更しました。たとえば、中央に1つ、下に1つ、上に1つなどのキャプションがあるように、各スライドのキャプションの位置を変更できます。

編集：ここにコードがあります私のカルーセルとペン。

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

私の提案は、あなたが