Question

$('.slider').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 3
    },
    600: {
      items: 3
    },
    1000: {
      items: 3
    }
  }
})

.main-content {
  background-image: url("https://d3ertfc829vzop.cloudfront.net/img/topo-map-50.png");
  background-color: #efefef;
}

.subheading-wrapper .subheading {
  font-size: 15px;
  color: #9AC133;
  text-transform: uppercase;
}

.heading-wrapper .heading {
  font-size: 2rem;
  color: #656565;
  font-weight: 500;
  text-transform: capitalize;
}

.card-img-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-img-overlay .card-title a {
  color: white;
}

.card-img-overlay .card-title a:hover {
  text-decoration: none;
}

.floating-wrapper {
  transform: translateX(0px) translateY(-100px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet">
<section>
  <div class="container my-5 py-3">
    <div class="row">
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae asperiores pariatur dignissimos itaque necessitatibus nam minus laudantium porro inventore cum ullam nisi, veniam, fugit deleniti explicabo nemo accusamus. Alias distinctio quisquam
        aperiam, voluptatem aliquid neque nisi minus dicta, ut beatae vitae vero labore cumque ad. Adipisci eaque tenetur veniam eius, ipsam minima fugiat deleniti est facere quasi consequuntur, odit doloremque deserunt veritatis, corporis nobis reiciendis
        eligendi. Saepe, eos nesciunt, impedit pariatur necessitatibus natus id harum et beatae, voluptatum nam odio! Doloribus sit quia deserunt. Soluta earum velit laudantium iusto deserunt eum iste illum nemo tempora consequatur amet voluptatum ut,
        exercitationem reiciendis sequi. Ipsum, assumenda laudantium! Soluta pariatur dolorum, quia ut tempora exercitationem placeat? Ratione animi laboriosam suscipit adipisci natus quo! Similique optio quidem animi amet nostrum, fugiat, repudiandae
        non laudantium consectetur aliquam recusandae velit quis nemo doloribus voluptas sunt ab incidunt! Id dolore consectetur repudiandae quidem dicta maiores illo, error eius tenetur eveniet consequatur esse voluptate cum, quaerat possimus odit alias
        ab, sit minus mollitia? Fugit labore dolorem voluptatem maxime reprehenderit fugiat assumenda, vero dicta, qui corporis minus! Sit consequuntur rerum est reprehenderit voluptatum sequi cupiditate. Qui ipsam saepe at dolor eos. Sequi voluptatem
        laborum impedit quis sapiente neque. Soluta!</p>
    </div>
  </div>
</section>

<section class="main-content">
  <div class="container">
    <div class="row py-5 position-relative">

      <div class="col-sm-12 col-md-3">
        <div class="subheading-wrapper mb-2">
          <span class="subheading">Lorem ipsum dolor.</span>
        </div>
        <div class="heading-wrapper mb-2">
          <span class="heading">
            Lorem ipsum dolor sit.
          </span>
        </div>
        <div class="content-wrapper">
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, magnam facere inventore culpa suscipit ducimus exercitationem doloremque mollitia quod voluptate ipsa dolorem enim sint eaque quos debitis sapiente ipsam architecto velit sed!</p>
        </div>
      </div>

      <div class="col-md-9 col-sm-12 ">
        <div class="row position-absolute floating-wrapper slider owl-carousel owl-theme">

          <div class="col-4">
            <div class="card text-white">
              <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
              <div class="card-img-overlay">
                <h5 class="card-title"><a href="#">Card title</a></h5>
              </div>
            </div>
          </div>

          <div class="col-4">
            <div class="card text-white">
              <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
              <div class="card-img-overlay">
                <h5 class="card-title"><a href="#">Card title</a></h5>
              </div>
            </div>
          </div>

          <div class="col-4">
            <div class="card text-white">
              <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
              <div class="card-img-overlay">
                <h5 class="card-title"><a href="#">Card title</a></h5>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</section>

以上代码段来自应用程序的html模板。在这里，我正在尝试将猫头鹰轮播实施到卡片项目上。

根据线框，该部分的布局应如下所示：

我已经实现了以下布局，但是在添加了猫头鹰轮播类owl-carousel owl-theme之后，该布局被毁了。特别是卡，无法找出原因。

我已经在代码笔here中重新创建了布局

Answer 1

问题是您在col-4中有类owl-item。您不需要这样做，因为owl-item已经具有计算出的宽度（因此您可以看到3个项目）

引导程序中的col-4类将width:33.33%添加到该元素。因此它的宽度为33.33%的{{1}}，但是您需要owl-item。

您可以将其更改为100%（如果需要使用flex），也可以删除该类，一切将按预期进行。

col-12

请参阅codepen（前两项已更改）

https://codepen.io/MihaiTCode/pen/RwbyWVX

猫头鹰旋转木马与引导网格和卡

1 个答案: