时间戳

首页 > 解决方案 > 猫头鹰轮播正在打破页面

css - 猫头鹰轮播正在打破页面

问题描述

嗨，我将此Codepen用于客户端站点（Squarespace）。我只通过 CSS 做了很多修改。>

  1. 请检查特定的客户页面；密码是 mmmm1234
  2. 向下滚动并检查我实现滑块的“发现在线体验”部分
  3. 例如，如果在较小的屏幕尺寸（如 1280 像素宽度）中查看，分页符
  4. 尤其是在 iPad 版本中，它最坏
  5. 通常，如果我们只放 4 或 5 张卡片，它不会破坏页面
  6. 但最终我们应该能够投入更多
  7. Squarespace 的贡献者/开发人员无法帮助我解决这个问题，并提到猫头鹰转盘本身可能有问题
  8. 谁能帮我？

下面是我用于客户端的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>

在此处输入图像描述

在此处输入图像描述

标签： cssowl-carouselsquarespace

解决方案

更新

当 Owl carousel 有很多元素时，它的owl-stage块会变得非常宽，并且 carousel 会从父框占据屏幕的整个宽度，它们已准备好屈服于它。

在其父块中，有一个带有.content-wrapper类的块，它可以变得比屏幕的可见区域更宽。

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

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

类.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

默认情况下，在 CSS 框模型中，您分配给元素的宽度和高度仅应用于元素的内容框。如果元素有任何边框或填充，然后将其添加到宽度和高度，以达到在屏幕上呈现的框的大小。

content-box为您提供默认的 CSS box-sizing 行为。

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

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

截屏

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

  flex-basis: 100%;
  width: 0;

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

在网页上，您还需要注意CSS 的特殊性才能使新属性起作用。

推荐阅读