如何更改每个Bootstrap旋转木马幻灯片上标题的位置？

这只是我想的一个普遍问题。我正在使用bootstrap创建一个传送带/滑块，并且我想知道如何为放置中的每个幻灯片更改标题。我已经尝试创建一个id来跟着班级一起走运，并且改变旋转木马标题说：“carousel-caption1”完全影响它。如何更改每张幻灯片上字幕的位置，例如，一个字幕位于中间，一个位于底部，一个位于顶部等。如何更改每个Bootstrap旋转木马幻灯片上标题的位置？

编辑：这是一个代码笔与我的旋转木马。

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

来源

2016-12-04 Lubidia13

ü希望位置是顶部还是中心？ – Niraj

我的建议是你可以旁边添加自己的自定义类“旋转木马字幕”这样class = "carousel-caption my-caption"

然后风格它在你的CSS，你喜欢

来源

2017-04-04 11:04:41 Rezwana

如何更改每个Bootstrap旋转木马幻灯片上标题的位置？

回答

相关问题