Sowa Karuzela i szerokość paska startowego niepoprawnie wyświetlana

Question

Mam przykład tego problemu.
Kliknięcie linku spowoduje wyświetlenie w połowie wyświetlanych ofert.
Te oferty są wyświetlane niepoprawnie.
Powinny one mieć pełną szerokość mobilną, a następnie col-sm-3 dla wszystkich innych urządzeń.

www.exclusivecard.co.uk

ten tylko się od dodałem sowa karuzelę do nich. W każdym razie opublikuję poniższy kod.

style

#offerslide .owlItem{ 
    display: block; 
    width: 100%; 
    height: auto; 
} 

strona

<div class="owlslide"> 
     <a href="somelink"> 
    <div class="col-xs-12 col-sm-3 owlItem"> 

     <div class="row" id="yellow"> 
     <div class="col-xs-12 "> 
      <div class="panel panel-warning coupon"> 
      <div class="panel-heading" id="head"> 
       <div class="panel-title" id="title"> 

       <span >title</span> 
       </div> 
      </div> 
      <div class="panel-body">     

      <img> 
       <div class="col-md-12 text-warning"> 
       <div class="offer"> 
        <span class="number">[saving]</span>      
       </div> 
       </div> 

      </div> 
      <div class="panel-footer" id="coupon-backing"> 
       <div class="coupon-code"> 
       [cat] 
       <span class="print"> 
       [expires] 
       </span> 

       </div> 

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

</a> 
</div> 

jquery

$("#owlslide").owlCarousel({ 
    autoPlay: 3000, //Set AutoPlay to 3 seconds 
    items : 3, 
    itemsDesktop : [1199,2], 
    itemsDesktopSmall : [979,3] 
}); 

Answer 1

Zamień col-xs-12 na col-md-12 w klasie owlItem, ponieważ col-xs-12 to dodatkowa mała klasa, a md/lg do reprezentacji pulpitu.

Answer 2

To dlatego tego col-xs-12 col-sm-3 owlItem, więc bootstrap tworzy kolumnę o szerokości 25% wewnątrz owl-item tworzoną przez owl Carousel w ten sposób.

element.style { 
    width: 464px; 
} 

Należy usunąć col-xs-12 col-sm-3 i ustawić szerokości przedmiotów z sowa karuzeli.