उल्लू कैरोसेल और बूटस्ट्रैप चौड़ाई गलत तरीके से प्रदर्शित

Question

मुझे वास्तव में इस समस्या का एक उदाहरण है।
यदि आप लिंक पर क्लिक करते हैं तो आपको पृष्ठ विशेष रुप से प्रदर्शित ऑफ़र के नीचे आधा रास्ता दिखाई देगा।
ये ऑफ़र पूरी तरह गलत तरीके से प्रदर्शित हो रहे हैं।
वे सभी अन्य उपकरणों के लिए पूर्ण चौड़ाई मोबाइल और फिर col-sm-3 होना चाहिए।

www.exclusivecard.co.uk

यह केवल के बाद से मैं उन्हें उल्लू हिंडोला जोड़ा हुआ। मैं वैसे भी नीचे कोड पोस्ट करेंगे।

शैलियों

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

पेज

<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

col-xs-12col-md-12 को उल्लूइटम कक्षा में col-xs-12 के रूप में बदलें एक अतिरिक्त छोटी कक्षा है और डेस्कटॉप प्रतिनिधित्व के लिए एमडी/एलजी का उपयोग किया जाता है।

Answer 2

इसकी वजह से है कि, इसलिए बूटस्ट्रैप owl-item के अंदर 25% चौड़ाई का स्तंभ बना रहा है जो इस तरह उल्लू कैरोसेल द्वारा बनाया गया है।

element.style { 
    width: 464px; 
} 

आप col-xs-12 col-sm-3 हटाने और उल्लू हिंडोला के साथ अपने आइटम की चौड़ाई निर्धारित करना चाहिए।