Owl 轮播正在破坏页面

Question

您好，我使用了这个 Codepen for a client site (Squarespace)。我仅通过 CSS 进行了很多修改。>

请检查特定客户端page；密码是 mmmm1234
向下滚动并查看我实现滑块的“发现在线体验”部分
例如，如果在较小的屏幕尺寸（如 1280 像素宽度）中查看，则分页符
它最容易损坏，尤其是在 iPad 版本中
一般只放4、5张卡片是不会破页的
但最终我们应该可以放更多
来自 Squarespace 的贡献者/开发人员无法帮助我解决这个问题，并提到可能是 owlcarousel 本身有问题
谁能帮帮我？

下面是我给客户

用的css和js


<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/css/uikit.min.css" rel="stylesheet">

<style>

.uk-margin {
  padding: 0 !important;
  margin: 0 !important;
}
.uk-section {
  background-color: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.owl-carousel {
  position: relative;
  margin-top: 30px;
}
.owl-nav {
  position: absolute;
  top: -45px;
  right: 10px;
}
.uk-card-primary {
  border: none;
  border-radius: 0 0 13px 13px;
  background: none !important;
  background-color: none !important;
  color: none !important;
  margin: 0 5px 5px 5px !important;
  box-shadow: 0 3px 5px 0 rgb(0 0 0 / 50%) !important;
  min-height: 114px !important;
}
.uk-card > :last-child {
  margin-top:0;
  margin-bottom: 10px;
  min-height: 114px !important;
}
.owl-dots {
  margin-top: 0 !important;
}
.uk-card-title {
  margin: 0 0 15px 0 !important;
  color: black !important;
  font-size: 15px;
  line-height: 120%;
}
.crd-rate {
  margin: 0 !important;
  color: black !important;
  font-size: 13px;
  line-height: 120%;
}
#crd-rate {
  color: black !important;
  font-weight: 700 !important;
}
#dsc {
  margin: 0 0 15px 0 !important;
  color: #808080;
  font-size: .8em;
  line-height: 120%;
}
.uk-card-primary.uk-card-hover:hover {
  background-color: none !important;
  box-shadow: none !important;
  border: 1px solid #cecece;
}
.owl-stage {
  padding: 15px !important;
}
.uk-card-body {
  padding: 8px 10px 10px 10px !important;
}
.uk-link, a {
  color: inherit !important;
}

/*
----
Card Image
----
*/
.crd-img {
  padding: 5px 5px 0 5px; 
}
#crd-img {
  border-radius: 13px 13px 0 0; 
}

/*
----
Rate, Star, Reviews
----
*/

.d-flex1, .align-items-end1, .justify-content-between1 {
  text-align: left;
  word-wrap: break-word;
  box-sizing: border-box;
  margin: 0 !important;
}
.d-flex1 {
  display: flex !important;
}
.align-items-end1 {
  align-items: flex-start !important;
}
.justify-content-between1 {
  justify-content: flex-start !important;
}
#crd-rating, #crd-star, #crd-review {
  margin-right: 5px !important;
  font-size: 13px !important;
  color: black !important;
}
/*#crd-rating, #crd-review {
  margin-top: 2px !important;
}*/
#crd-rating {
  color: black !important;
  font-weight: 700 !important;
}
#crd-star {
  max-width: 20px !important;
  margin-top: -2px !important;
}
#crd-review {
  font-weight: 100 !important;
}

/*
----
Owl Carousel
----
*/

.owl-theme .owl-nav {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent; }
.owl-theme .owl-nav [class*='owl-'] {
    color: black;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px; }
.owl-theme .owl-nav [class*='owl-']:hover {
    background: none;
    color: #808080;
    text-decoration: none; }
  .owl-theme .owl-nav .disabled {
    opacity: 0.5;
    cursor: default; }
.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 10px; }
.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent; }
.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline; }
.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #a7a7a7;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #cecece; }
.owl-item.active {
  margin: 0 !important;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>

<script>
  $('.owl-carousel').owlCarousel({
    loop:false,
  stagePadding: 15,
    margin:10,
    nav:true,
  navText : ['<span class="uk-margin-small-right uk-icon" uk-icon="icon: chevron-left"></span>','<span class="uk-margin-small-left uk-icon" uk-icon="icon: chevron-right"></span>'],
    responsive:{
        0:{
            items:2
        },
        640:{
            items:3
        },
      960:{
            items:4
        },
        1200:{
            items:5
        }
    }
})
</script>

Answer 1

已更新

当 Owl 轮播有很多元素时，它的 owl-stage 块变得很宽，轮播从父盒中占据屏幕的整个宽度，它们准备让出

并且在它的父块中有一个带有 .content-wrapper class 的块，它有能力变得比屏幕的可见区域更宽。

Class .page-section:not(.full-bleed-section)>.content-wrapper 具有 CSS 属性：

   box-sizing: content-box;
   padding-left: 30px;
   padding-right: 30px;

Class .page-section>.content-wrapper 具有属性：

   box-sizing: content-box;
   max-width: 1363px;
   width: 100%;

因此，我们有 100% + 60px 这个块的潜在宽度：
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.

content-box gives you the default CSS box-sizing behavior.

当 max-width 属性生效时，这在桌面上并不明显。但在窄屏幕上，它不再限制块的宽度，而是超出了可见区域的边界。然后我们在页面布局的右侧看到一个水平滚动条和一个额外的白色区域。

解决方案 1：为此块定义 box-sizing: border-box;。在这种情况下，填充将被计算在宽度的 100% 之内，而不是添加到它们中。

解决方案2：如果你需要在这里使用box-sizing: content-box;，你可以利用这个块已经有display: flex; 属性并让它自己计算出它可以为其内容提供多少 space。

  flex-basis: 100%;
  width: 0;

这两种解决方案在使用开发人员工具编辑网站时都适用。据我所知，它们为任何屏幕宽度提供了可靠的结果。

在网页上，您还需要注意 CSS specificity 才能使新属性生效。

Owl 轮播正在破坏页面

Owl carousel is breaking the page

css

squarespace

owl-carousel