Owl Carousel and bootstrap width displaying incorrectly

Question

I actually have an example of this problem.
If you click the link you will see half way down the page featured offers.
These offers are displaying completely incorrectly.
They are supposed to be full width mobile and then col-sm-3 for all other devices.

www.exclusivecard.co.uk

this only happened since I added owl carousel to them. I will post the code below anyway.

styles

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

page

 <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-12替换为owlItem类中的col-md-12 ，因为col-xs-12是一个额外的小类，而md / lg用于桌面表示。

Answer 2

That is because of this col-xs-12 col-sm-3 owlItem , so bootstrap is creating column of 25% width inside owl-item that is created by owl Carousel like this.

element.style {
  width: 464px;
}

You should remove col-xs-12 col-sm-3 and set widths of your items with owl carousel.