Question

我在图像滑块中遇到问题，其中我成功添加了图像并且滑动很好但是滑动左右两端都有点延伸我不知道哪里出错了，这发生在{{3 }}

我还添加了我的jsp代码

<div class="row" style="padding: 1 2 1 15;">
<div style="margin-bottom: 0px;">
    <ul class="nav nav-tabs" style="margin-bottom: 4px;background-color:#FFFFFF;" id="productFieldsTabs">
        <li class="active" id="Bestseller"><a href="#Best-seller">BESTSELLER</a></li>
        <li id="Bestsoldproduct"><a href="#BestsoldProduct">BESTSOLDPRODUCT</a></li>
    </ul>
</div>
<div class="tab-content" style="border: 0px; padding: 0px; background-color: transparent;">
    <div class="tab-pane fade in active" id="Best-seller">
        <div class="row">
            <div class="carousel slide article-slide carousel-example-product" data-ride="carousel" style="padding: 0px;">
                <div class="carousel-inner" role="listbox">
                    <div class="col-sm-12 item active">
                        <div class="col-sm-2">
                            <div class="thumbnail product-box">
                                <img src="${context}/resources/img/product2/aprons-potholders.jpg" alt="" />
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="thumbnail product-box">
                                <img src="${context}/resources/img/product2/baking-dishes.jpg" alt="" />
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="thumbnail product-box">
                                <img src="${context}/resources/img/product2/canister.jpg" alt="" />
                            </div>
                        </div>

                    </div>
                </div>

                <a class="left carousel-control" href="#carousel-example-product1" role="presentation" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
                    class="sr-only">Previous</span>
                </a> <a class="right carousel-control" href="#carousel-example-product1" role="presentation" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>

            </div>
        </div>
    </div>

以上是一个图像滑块的一部分，我得到了所有滑块上面的问题。

Answer 1

我注意到的一个问题是你使用了几个没有“col”类的“行”类来弥补负余量。

这不是Bootstrap网格系统的工作方式，而是会导致整个页面的填充和边距出现问题。

如果您想使用一行，并且仍希望内容延伸100％，我会做类似的事情：

<div class="row">
  <div class="col-xs-12">
    <div>Content</div>
  </div>
</div>

使用div的图像滑块

1 个答案: