猫头鹰旋转木马以糟糕的方式显示所有项目

如何解决猫头鹰旋转木马以糟糕的方式显示所有项目

我试图让屏幕上只显示三个项目 但我让它们以一种糟糕的方式对齐，它们四排并排在彼此下方 我想要他们这样：

但它们看起来像这样

在这两种情况下，猫头鹰滑块都在抓取事件中工作并滑动但当项目超过 3 时显示两行

这是我的 HTML 代码

<div class="owl-carousel owl-theme owl-responsive-1441 owl-loaded" style="opacity: 1;">

<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px,0px,0px); transition: all 0.25s ease 0s; width: 1440px;"><div class="owl-item active" style="width: auto; margin-right: 0px;"><div class="row">
<div class="item col-12 col-md-4">
<div href="/VCP/site_vcp/public_html/consultingdd/" class="item-content">
<span class="image"><img src="/VCP/site_vcp/public_html/uploads/files/Couns_Home_page_icon.png" alt="image"></span>
<span class="brief">
<h4>consultingdd</h4>
<p>test test</p>
</span>
</div>
</div>
<div class="item col-12 col-md-4">
<div href="/VCP/site_vcp/public_html/consulting6622/" class="item-content">
<span class="image"><img src="Couns_Home_page_icon.png" alt="image"></span>
<span class="brief">
<h4>consulting6622</h4>
<p>test test kjkjhkjhkjh
asdasd
asdasda
asd</p>
</span>
</div>
</div>
<div class="item col-12 col-md-4">
<div href="/VCP/site_vcp/public_html/consulting66/" class="item-content">
<span class="image"><img src="Couns_Home_page_icon.png" alt="image"></span>
<span class="brief">
<h4>consulting66</h4>
<p>test test kjkjhkjhkjh</p>
</span>
</div>
</div>
<div class="item col-12 col-md-4">
<div href="/VCP/site_vcp/public_html/consulting/" class="item-content">
<span class="image"><img src="Couns_Home_page_icon.png" alt="image" style="opacity: 1;"></span>
<span class="brief">
<h4>consulting</h4>
<p>test test</p>
</span>
</div>
</div>
</div></div></div></div><div class="owl-controls"><div class="owl-nav"><div class="owl-prev" style="display: none;">prev</div><div class="owl-next" style="display: none;">next</div></div><div class="owl-dots" style=""><div class="owl-dot active"><span></span></div></div></div></div>

这是我的javascript代码

 if ($(".our-services  .owl-carousel").length) {
        $('.our-services  .owl-carousel').owlCarousel({
            loop:true,autoplay:true,autoplayTimeout:5000,lazyLoad: true,// items:3,autoWidth: true,responsiveClass:true,nav: false,responsive: {
                0: {
                    items: 1
                },424: {
                    items: 1
                },768: {
                    items: 2
                },991: {
                    items: 2
                },1199: {
                    items: 2
                },1441: {
                    items: 3
                },1990:{
                    items: 3
                }
            }

        });

解决方法

您的 HTML 代码似乎是 Owl Carousel 动态生成的代码，如果是这种情况，请输入您的原始静态 HTML 代码。如果没有，请尝试使用以下方法：

<div class="owl-carousel owl-theme">

  <div class="item">
    <div href="/VCP/site_vcp/public_html/consultingdd/" class="item-content">
      <span class="image"><img src="/VCP/site_vcp/public_html/uploads/files/Couns_Home_page_icon.png"
          alt="image"></span>
      <span class="brief">
        <h4>consultingdd</h4>
        <p>test test</p>
      </span>
    </div>
  </div>

  <div class="item">
    <div href="/VCP/site_vcp/public_html/consulting6622/" class="item-content">
      <span class="image"><img src="Couns_Home_page_icon.png" alt="image"></span>
      <span class="brief">
        <h4>consulting6622</h4>
        <p>test test kjkjhkjhkjh
          asdasd
          asdasda
          asd</p>
      </span>
    </div>
  </div>

  <div class="item">
    <div href="/VCP/site_vcp/public_html/consulting66/" class="item-content">
      <span class="image"><img src="Couns_Home_page_icon.png" alt="image"></span>
      <span class="brief">
        <h4>consulting66</h4>
        <p>test test kjkjhkjhkjh</p>
      </span>
    </div>
  </div>

  <div class="item ">
    <div href="/VCP/site_vcp/public_html/consulting/" class="item-content">
      <span class="image"><img src="Couns_Home_page_icon.png" alt="image" style="opacity: 1;"></span>
      <span class="brief">
        <h4>consulting</h4>
        <p>test test</p>
      </span>
    </div>
  </div>

</div>