我在其他时间使用引导程序时也看到了此问题,这困扰了我。当轮播循环时,列项会扩展到容器的整个宽度,而忽略其填充。我该如何解决?

                <div id="shop-crsl-1" class="carousel slide shop-crsl hidden-xs" data-ride="carousel">

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Casual Suit</h5>
                                                <h5 class="main-text-color">$199.99</h5>
                                            </div>

                                            <div class="rating">
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Night Suit</h5>
                                                <h5 class="main-text-color">$249.99</h5>
                                            </div>

                                            <div class="rating">

                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Elegant Suit</h5>
                                                <h5 class="main-text-color">$149.99</h5>
                                            </div>

                                            <div class="rating">
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Super-Casual Suit</h5>
                                                <h5 class="main-text-color">$199.99</h5>
                                            </div>

                                            <div class="rating">
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Super-Night Suit</h5>
                                                <h5 class="main-text-color">$249.99</h5>
                                            </div>

                                            <div class="rating">

                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Super-Elegant Suit</h5>
                                                <h5 class="main-text-color">$149.99</h5>
                                            </div>

                                            <div class="rating">
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Controls -->
                    <div class="controls">
                        <a class="left fa fa-chevron-left" href="#shop-crsl-1" data-slide="prev"> </a>
                        <a class="right fa fa-chevron-right" href="#shop-crsl-1" data-slide="next"> </a>
                    </div>
                </div>

.shop-crsl {
    position: relative;
    overflow: hidden;
}

.shop-crsl .controls a {
    position: absolute;
    top: 50%;
    width: 100%;
    line-height: 53px;
    width: 50px;
    border-radius: 2px;
    text-align: center;
    margin-top: -30px;
    font-size: 11px;
    height: 50px;
    transition: all 0.35s ease;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
}

.shop-crsl .controls a:hover {
    text-decoration: none;
}

.shop-crsl .controls .left {
    left: 15px;
    position: absolute;
    padding-right: 3px;
}

.shop-crsl .controls .right {
    right: 15px;
    position: absolute;
    padding-left: 3px;
}

最佳答案

如果将col-sm-4 div嵌套在<div class="row">中,则应该可以解决您的问题。参见下面的代码:

<div class="carousel-inner">
    <div class="item active">
        <div class="row">
            <div class="col-sm-4">
                <!-- You 1st Item -->
            </div>
            <div class="col-sm-4">
                <!-- You 2nd Item -->
            </div>
            <div class="col-sm-4">
                <!-- You 3rd Item -->
            </div>
        </div>
    </div>
    <div class="item">
        <div class="row">
            <div class="col-sm-4">
                <!-- You 4th Item -->
            </div>
            <div class="col-sm-4">
                <!-- You 5th Item -->
            </div>
            <div class="col-sm-4">
                <!-- You 6th Item -->
            </div>
        </div>
    </div>
</div>


现在,我无法复制您的问题,但是我使用了here方法,嵌套行会有所帮助。如果您还有其他问题,请告诉我。

关于html - 旋转时,转盘内的列元素会扩展,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21683781/

10-12 13:17