Question

我尝试使用bootstrap carousel，但我无法正确对齐图片。

我的照片尺寸为1250 * 550

这是问题所在

我想让这张图片正确地位于旋转木马的中心。我试图添加

img-responsive和center-block加入img课程，但似乎无效。

以下是carousel code

<div class="carousel slide" id="carousel-641804">
    <ol class="carousel-indicators">
        <li data-slide-to="0" data-target="#carousel-641804">
        </li>
        <li data-slide-to="1" data-target="#carousel-641804">
        </li>
        <li data-slide-to="2" data-target="#carousel-641804" class="active">
        </li>
    </ol>
    <div class="carousel-inner">
        <div class="item">
            <img class ="img-responsive center-block" alt="Carousel Bootstrap First" src="source/top1.jpg" />
            <div class="carousel-caption">
                <h4>
                    First Thumbnail label
                </h4>
                <p>
                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
            </div>
        </div>
        <div class="item">
            <img alt="Carousel Bootstrap Second" src="source/top2.jpg" />
            <div class="carousel-caption">
                <h4>
                    Second Thumbnail label
                </h4>
                <p>
                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
            </div>
        </div>
        <div class="item active">
            <img alt="Carousel Bootstrap Third" src="source/top3.jpg" />
            <div class="carousel-caption">
                <h4>
                    Third Thumbnail label
                </h4>
                <p>
                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
            </div>
        </div>
    </div> <a class="left carousel-control" href="#carousel-641804" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-641804" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

Answer 1

使用这个最佳答案 Make Bootstrap's Carousel both center AND responsive?

它可以完美地解决这个问题。

在Css中添加此内容

div.c-wrapper{
    width: 80%; /* for example */
    margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}

如何将轮播图像中心与引导程序对齐？

1 个答案: