shift bootstrap旋轉木馬標題中心right

Question

我想改變bootstrap旋轉木馬標題中心的權利。我目前只有常規的引導程序代碼。我只能設法找到解決方案，一路轉移到頂端。任何幫助將不勝感激。

<div id="carousel1" class="carousel slide" data-ride="carousel" style="width:100%;"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel1" data-slide-to="0" class="0"></li> 
     <li data-target="#carousel1" data-slide-to="1"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="/wp-content/themes/creativeforces/images/preschool.jpg" class="img-responsive" alt="" style="width:100%;"> 
      <div class="carousel-caption"> 
      <div class="inner-caption"> 
       <h3>Image1</h3> 
       <p>This is image one for carousel</p> 
       </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="/wp-content/themes/creativeforces/images/kid.jpg" class="img-responsive" alt="" style="width:100%;"> 

      <div class="carousel-caption"> 
      <div class="inner-caption"> 
       <h3>Image1</h3> 
       <p>This is image one for carousel</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <a href="#carousel1" class="left carousel-control" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    </a> 
    <a href="#carousel1" class="right carousel-control" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    </a> 
</div> 

這是它目前看起來像 這是我希望它看起來像

Answer 1

你需要修改你的CSS，請嘗試以下代碼。

.carousel-caption { 
right: 20%; 
left: auto; 
padding-bottom: 30px; 
width: 250px; 
background: rgba(0,0,0,0.5); 
top: 50%; 
border-radius: 18px; 
bottom: auto; 
} 

Answer 2

嘗試用下面的代碼，它可以幫助你

.inner-caption{ 
 
    position : absolute; 
 
    bottom : 25%; 
 
    left : 385px !important; 
 
    background: rgba(0,0,0,0.5); 
 
    padding : 10px; 
 
    border-radius : 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<div id="carousel1" class="carousel slide" data-ride="carousel" style="width:100%;"> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel1" data-slide-to="0" class="0"></li> 
 
     <li data-target="#carousel1" data-slide-to="1"></li> 
 
    </ol> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <img src="http://getlevelten.com/sites/default/files/styles/900x450/public/content/blog/images/screen_shot_2014-04-11_at_4.28.22_pm.png?itok=EyxdbgwS" class="img-responsive" alt="" style="width:100%;"> 
 
      <div class="carousel-caption"> 
 
      <div class="inner-caption"> 
 
       <h3>Image1</h3> 
 
       <p>This is image one for carousel</p> 
 
       <a class="btn btn-success btn-xs" >Learn More</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="https://cdn.wpsmackdown.com/wp-content/uploads/2013/10/wordpress-bootstrap-theme-loading-css-javascript.png" class="img-responsive" alt="" style="width:100%;"> 
 

 
      <div class="carousel-caption"> 
 
      <div class="inner-caption"> 
 
       <h3>Image1</h3> 
 
       <p>This is image one for carousel</p> 
 
       <a class="btn btn-success btn-xs" >Learn More</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <a href="#carousel1" class="left carousel-control" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    </a> 
 
    <a href="#carousel1" class="right carousel-control" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    </a> 
 
</div>

Answer 3

這個CSS添加到您的退出代碼，它必須工作。

.inner-caption{ 
    background-color:rgba(0, 0, 0, 0.5); 
    border-radius: 5px; 
} 

.carousel-caption{  
     right: 5%; 
     left: 50%; 
     top: 30%; 
} 

這裏是一個鏈接Working JSfiddle .Play與右，下，上屬性標題對齊到所需位置