Изображение слайдера с помощью div

Question

У меня возникла проблема с слайдером изображения, в котором я успешно добавил изображение и его скользящее изображение, но при скольжении как левого, так и правого конца немного расширяется, я не знаю, где я ошибся, это происходит в in this link

И я также добавил мой 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>