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，请尝试以下代码。

-(void) drawRect:(CGRect)rect{
CGContextRef context = UIGraphicsGetCurrentContext();

UIColor * redColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];

CGContextSetFillColorWithColor(context, redColor.CGColor);
CGContextFillRect(context, self.bounds);
}

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的链接，其右侧，底部和顶部属性可将标题与您想要的位置对齐

shift bootstrap carousel caption center right

3 个答案: