javascript - 右移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>

这是目前的样子

这就是我想要的样子

最佳答案

您需要修改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;
}