css - 关闭模式时，带有背景图像和显示 flex 的 Div 会移动

Question

我有一排缩略图，动画标题以 display: flex 为中心。单击缩略图按钮时，会出现带有幻灯片的模式。模式关闭后，所选画廊的缩略图被移出原位。我已经对此进行了大量的 css 调试，但没有发现任何结论。我认为它是 Bootstrap 模态 JS 的副作用或与显示有关的东西:flex - 显示:悬停时 block 开关。

.gallery-top {
  height: 220px;
  margin-bottom: 10px;
  .swiper-slide {
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    border-right: 3px solid #fff;
  }
}

.gallery-row {
  padding: 0 0 0 2px;
}

.gallery-thumbs {
  height: 90px;
  .swiper-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    border-right: 3px solid #fff;
  }
}

.galleryThumbs {
  div.galleryThumbWrapper {
    padding-right: 2px;
    padding-bottom: 2px;
    >div {
      width: 100%;
      height: 100%;
    }
  }
  .cta_box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: white;
    background: rgba(138, 196, 64, 0.6);
    z-index: 2;
    .cta_holder {
      padding-bottom: 20px;
      .title {
        font-size: 1.2em;
        line-height: 1em;
        padding: 20px 20px 10px 20px;
        font-family: proxima-nova;
        font-weight: 600;
        color: white;
        text-transform: uppercase;
        margin: 20px 0 0 0;
      }
      .button {
        cursor: pointer;
        color: white;
        background: transparent;
        border: 1px solid #fff;
        border-radius: 30px;
        display: inline-block;
        padding: 3px 16px;
        font-family: proxima-nova;
        font-weight: 600;
        font-size: 1em;
        text-transform: uppercase;
      }
    }
  }
  &:last-child {
    border: 0;
  }
}

@media screen and (min-width: 768px) {
  .gallery-top {
    height: 320px;
  }
}

@media screen and (min-width: 1024px) {
  .col-lg-5ths {
    width: 20%;
    flex: 0 0 20%;
  }
  .gallery-top {
    height: 420px;
  }
  .galleryThumbs {
    .cta_box {
      display: block;
      justify-content: center;
      align-items: center;
      top: 100%;
      transition: top 0.75s;
    }
    &:hover .cta_box {
      top: 0;
      display: block;
      .cta_holder {
        display: block;
      }
    }
  }
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


<div class="row gallery-row">
  <div class="col-12 col-md-6 col-lg-5ths galleryThumbs embed-responsive embed-responsive-1by1">
    <div class="embed-responsive-item galleryThumbWrapper">
      <div style="background: url('http://lorempixel.com/400/400/') no-repeat center center; background-size: cover;">
        <div class="cta_box">
          <div class="cta-content">
            <div class="cta_holder">
              <p class="title">Headline 1</p>
              <div>
                <button type="button" class="button" data-toggle="modal" data-target="#galleryModal" data-gallery="{{gall.uri}}">View Project</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="galleryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <p>
        My Modal
      </p>
    </div>
  </div>
</div>

这是一个 fiddle 。

https://jsfiddle.net/sdetcp51/

Answer 1

这是因为在 @media screen and (min-width: 1024px) 上，您将 .cta_box 的顶部设置为 100%，这会将框推到bottom，但是你仍然将它的 bottom 从以前的样式设置为 0。这基本上使盒子的高度为 0。因此它的内容会溢出。

模态关闭后背景图片的移动是由于框内容溢出。

修复很简单。只需在 .cta_box 上添加 overflow: hidden;。

fiddle :https://jsfiddle.net/sdetcp51/54/