Question

我想这只是一个普遍的问题。我正在使用bootstrap创建旋转木马/滑块，我想知道如何在每个幻灯片上更改位置。我已经尝试创建一个id来与班级一起运动而没有运气并改变旋转木马标题说：＆＃34; carousel-caption1＆＃34;完全影响它。如何更改每张幻灯片上标题的位置，例如，一个位于中间的标题，一个位于底部，一个位于顶部，等等。

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

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

我的建议是你可以在“carousel-caption”旁添加自己的自定义类，如class = "carousel-caption my-caption"

然后根据需要在你的CSS中设置样式

如何在每个Bootstrap轮播幻灯片上更改标题的位置？

1 个答案: