Bootstrap 3轮播图像不适合整个屏幕以及如何定位文本?

时间:2014-04-03 13:02:39

标签: image text twitter-bootstrap-3 carousel

我是新手,而不是编码。

我在bootstrap中创建了一个旋转木马,但图像位于中间。但我希望它遍布整个旋转木马。我该如何解决?

我希望它上面的文字在左侧的图片上。我怎样才能做到这一点?我尝试使用text-align,但也许我在错误的行上做了。

<div class="row dnd_bottomspace">
<div class="col-md-12">         
    <div id="myCarousel" class="carousel slide"  data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>   
       <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item">
                <h2>Slide 1</h2>
                <div class="carousel-caption">
                    <img src="Materialien/erde.jpg" class="img-responsive">
                  <h3>Erster Slider</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                    <img src="Materialien/erde.jpg" class="img-responsive">
                    <h3>Zweiter Slider</h3>
                    <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                    <img src="Materialien/erde.jpg" class="img-responsive">
                    <h3>Dritter Slider</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 4</h2>
                <div class="carousel-caption">
                    <img src="Materialien/erde.jpg" class="img-responsive">
                    <h3>Vierter Slider</h3>
                    <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
                </div>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

这部分应该是class =&#34; item&#34;

<img src="Materialien/erde.jpg" class="img-responsive">

任何描述图片或文字的文字都应该写成class =&#34; carousel-caption&#34;。

如果你想让文字在左侧,那么

<div class="carousel-caption" style="text-align:left;">