为什么猫头鹰旋转木马超出我的样式表？

Question

我在Wordpress中实现了Owl Carousel。我使用Bootstrap所以我的所有网站都是从col和行制作的，但是当我从Owl Carousel中输入代码时，它会破坏我的样式表并将页面设置为宽度为3000px。

这是代码

有没有人遇到过同样的问题？

谢谢

$(document).ready(function() {
          $(".slider1").owlCarousel({
            center: true,
            items:2,
            autowidth: true,
            loop:false,
            margin:10,
            responsive:{
              600:{
                items:4
              }
            }
          });
        });

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>

<section class="slider">

<?php
$args = array(
  'category_name' => 'test',
  'posts_per_page' => 2,
);

$the_query = new WP_Query($args);

if($the_query->have_posts()) : ?>
<div class="container">
  <div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="slider1">
      <?php  while($the_query->have_posts()): $the_query->the_post();?>

        <div class="slide">
          <?php the_post_thumbnail('slider'); ?>
        </div>

        <?php
      endwhile;
      ?>
    </div>
  </div>
</div>
</div>

<? endif; ?>
</section>