элементы колонки внутри карусели расширяются при раздвижении

Я видел эту проблему в других случаях, когда я работал с бутстрапом, и это меня било. Когда карусель циклически перемещает элементы столбца, расширяется до полной ширины контейнера, игнорируя их заполнение. Как я могу это исправить?элементы колонки внутри карусели расширяются при раздвижении

   <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; 
}

источник

2014-02-10 Szekely Jonathan

Если гнездо ваши col-sm-4 дивы в виде <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 и с вложенной строки помогает. Дайте мне знать, если у вас есть еще вопросы.

источник

2014-02-10 18:12:19 theRyanMark

Добавление строки на самом деле не помогает. если я добавлю строку, она, похоже, близка к тому, как это должно быть, но мне нужно заполнить 15px по сторонам, и каждый раз, когда я пытаюсь добавить это, я возвращаюсь к квадрату 1 –

ах, на самом деле, если бы я добавил для родителя за пределами этой карусели, похоже, работает –

Рад, что я мог бы помочь. Карусели могут быть блестящими при добавлении столбцов в поворот. – theRyanMark

элементы колонки внутри карусели расширяются при раздвижении

ответ

Смежные вопросы