css - Owl Carousel 正在打破页面

Question

嗨，我用过这个 Codepen对于 client site (平方空间)。我只通过 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 Carousel 有很多元素时，它的owl-stage块变得非常宽，轮播从父框获取屏幕的整个宽度，他们准备屈服于它。
在它的父块中有一个带有 .content-wrapper 的块。类，它能够变得比屏幕的可见区域更宽。
类(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属性(property)有效。但是在窄屏幕上，它不再限制块的宽度，而是超出了可见区域的边界。然后我们在页面布局的右侧看到一个水平滚动条和一个额外的白色区域。
解决方案 1 : 定义 box-sizing: border-box;对于这个块。在这种情况下，填充将被计算在宽度的 100% 内，而不是添加到它们中。

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

  flex-basis: 100%;
  width: 0;

在使用开发人员工具编辑站点时，这两种解决方案都能很好地工作。据我所知，它们为任何屏幕宽度提供可靠的结果。
在网页上，您还需要关注CSS specificity为了使新属性起作用。