猫头鹰旋转木马和自举宽度显示不正确

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

替换owlItem 类中的 ，因为col-xs-12它是一个额外的小类，并且 md/lg 用于桌面表示。col-md-12col-xs-12