Question

我一直试图让这个旋转木马工作几个小时，但我似乎没有收到预期的结果，getbootstrap.com上的文档对于这个涉及到的任何细微差别都不是很具体（通常你只需复制粘贴代码就可以了。）

基本上，我有first example here的默认代码并进行了修改：

<div class="row">

    <div class="col-md-12">

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img class="center-block" src="assets/img/rate-shop-black.png">
                    <div class="carousel-caption">
                        <h3>Rate Shopping Tool</h3>
                        <p>Always get the best rates possible when using our best-in-class rate shopping tool.
                    </div>
                </div>
                <div class="item">
                    <img class="center-block" src="assets/img/rate-shop-black.png">
                    <div class="carousel-caption">
                        <h3>Rate Shopping Tool</h3>
                        <p>Always get the best rates possible when using our best-in-class rate shopping tool.
                    </div>
                </div>
                <div class="item">
                    <img class="center-block" src="assets/img/rate-shop-black.png">
                    <div class="carousel-caption">
                        <h3>Rate Shopping Tool</h3>
                        <p>Always get the best rates possible when using our best-in-class rate shopping tool.
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>

            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

    </div>
</div>

我找到的资源之一Carousel image doesn't fill the width in bootstrap 3提到在Img标签上设置width =“100％”，但这会导致图像爆炸到天文数字。

我发现另一个资源提到图像变大，所以我进入variables.less并发现@screen-lg的宽度设置为1200px所以我回到了Gimp并增加了基础画布大小为1200px。这看起来更好，但是在渐变开始于.carousel-control元素之前，旋转木马中图像两侧至少仍有一整英寸显示纯白色。

值得注意的是，除非我将.center-block课程应用于他们，否则图像会“粘在”旋转木马的左侧，这会让我更接近我想要的效果而不是问题。

我想知道我是否应该再次增加图像尺寸，如果是这样的话呢？整页（没有.container）旋转木马需要多大的图像？那些被.container包裹的人怎么样？

或者我错过了造成这种情况发生的部分标记？

以下是我目前正在制作的图片。

Shows current result from the above HTML

Answer 1

这是一个jsFiddle给你。

将父滑块宽度设置为100％，最大宽度为1400px;将滑块居中，在大型显示器上不会太大。您可以根据自己的喜好调整max-width属性。

http://jsfiddle.net/4sBED/1/

#carousel-example-generic {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

Bootstrap 3图像不会填充Carousel，卡在左侧

1 个答案: