引导列无意中转移悬停

Question

我有自举列，用于显示产品信息。每个div都有我添加的4种悬停效果。问题出现在“col-sm”断点处，第一个div在其他地方包裹。当鼠标悬停在最后一个顶部div上时，包裹的div会在布局周围移动。我已经尝试评论每个悬停效果以找到问题，但是看起来悬停上的任何更改都会导致div移位。

没有任何悬停效果，div根本不会移动。 我尝试使用“清除”属性，但这并没有产生预期的结果，但我仍然愿意接受建议。

请运行我在全屏幕上提供的片段，其片段不超过992像素。 提前谢谢。

.store .store-product {
  text-align: center;
}

.store .store-product .thumbnail {
  overflow: hidden;
  margin-top: 2rem;
  padding-top: 3rem;
  transition: box-shadow .3s ease-in-out;
}

.store .store-product .caption {
  transition: all .3s ease;
  margin-top: 2rem;
  font-size: 20px;
  border-top: 1px solid #ddd;
}

.store .store-product .product-img {
  transition: all .3s ease;
}

.store .store-product .product-name {
  font-weight: 300;
}

.store .store-product .product-price {
  color: black;
  margin-bottom: 3rem;
}

.store .store-product .product-actions {
  transition: all .3s ease;
  opacity: 0;
  margin-bottom: 1rem;
}

.store .store-product .product-actions a {
  font-weight: 300;
  text-transform: uppercase;
}

.store .store-product:hover .product-img {
  transform: scale(1.2);
}

.store .store-product:hover .thumbnail {
  -webkit-box-shadow: 4px 4px 5px 2px #ddd;
    -moz-box-shadow: 4px 4px 5px 2px #ddd;
    box-shadow: 4px 4px 5px 2px #ddd;
}

.store .store-product:hover .thumbnail .caption {
    border: 0;
}

.store .store-product:hover .product-actions {
    opacity: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row store">
  <div class="col-xs-12 store-logo">
    <img class="img-responsive" src="img/Walmart_logo.svg_03.png" alt="">
  </div>
  <div class="col-xs-12 col-sm-4 col-md-3 store-product">
    <div class="thumbnail">
      <img class="product-img" src="img/camera.png" alt="product">
      <div class="caption">
        <p class="product-name">Canon EOS 80D + EF-S 18-135mm IS nano USM</p>
        <p class="product-price">$1 300</p>
        <p class="product-actions"><a href="#" class="btn btn-primary" role="button"><i class="fa fa-shopping-cart" aria-hidden="true"></i> add to cart</a> <a href="#" class="btn btn-default" role="button"><i class="fa fa-heart-o" aria-hidden="true"></i> wishlist</a></p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-3 store-product">
    <div class="thumbnail">
      <img class="product-img" src="img/camera.png" alt="product">
      <div class="caption">
        <p class="product-name">Canon EOS 80D + EF-S 18-135mm IS nano USM</p>
        <p class="product-price">$1 300</p>
        <p class="product-actions"><a href="#" class="btn btn-primary" role="button"><i class="fa fa-shopping-cart" aria-hidden="true"></i> add to cart</a> <a href="#" class="btn btn-default" role="button"><i class="fa fa-heart-o" aria-hidden="true"></i> wishlist</a></p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-3 store-product">
    <div class="thumbnail">
      <img class="product-img" src="img/camera.png" alt="product">
      <div class="caption">
        <p class="product-name">Canon EOS 80D + EF-S 18-135mm IS nano USM</p>
        <p class="product-price">$1 300</p>
        <p class="product-actions"><a href="#" class="btn btn-primary" role="button"><i class="fa fa-shopping-cart" aria-hidden="true"></i> add to cart</a> <a href="#" class="btn btn-default" role="button"><i class="fa fa-heart-o" aria-hidden="true"></i> wishlist</a></p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-3 store-product">
    <div class="thumbnail">
      <img class="product-img" src="img/camera.png" alt="product">
      <div class="caption">
        <p class="product-name">Canon EOS 80D + EF-S 18-135mm IS nano USM</p>
        <p class="product-price">$1 300</p>
        <p class="product-actions"><a href="#" class="btn btn-primary" role="button"><i class="fa fa-shopping-cart" aria-hidden="true"></i> add to cart</a> <a href="#" class="btn btn-default" role="button"><i class="fa fa-heart-o" aria-hidden="true"></i> wishlist</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Store row /end -->

Answer 1

从试错中我能够确定您的问题是以下样式：

.store .store-product:hover .thumbnail .caption {
  border: 0;
}

将该类更改为以下似乎可以解决问题。不幸的是，我不明白为什么。

.store .store-product:hover .thumbnail .caption {
  border-color: transparent;
}

.store .store-product {
  text-align: center;
}

.store .store-product .thumbnail {
  overflow: hidden;
  margin-top: 2rem;
  padding-top: 3rem;
  transition: box-shadow .3s ease-in-out;
}

.store .store-product .caption {
  transition: all .3s ease;
  margin-top: 2rem;
  font-size: 20px;
  border-top: 1px solid #ddd;
}

.store .store-product .product-img {
  transition: all .3s ease;
}

.store .store-product .product-name {
  font-weight: 300;
}

.store .store-product .product-price {
  color: black;
  margin-bottom: 3rem;
}

.store .store-product .product-actions {
  transition: all .3s ease;
  opacity: 0;
  margin-bottom: 1rem;
}

.store .store-product .product-actions a {
  font-weight: 300;
  text-transform: uppercase;
}

.store .store-product:hover .product-img {
  transform: scale(1.2);
}

.store .store-product:hover .thumbnail {
  -webkit-box-shadow: 4px 4px 5px 2px #ddd;
  -moz-box-shadow: 4px 4px 5px 2px #ddd;
  box-shadow: 4px 4px 5px 2px #ddd;
}

.store .store-product:hover .thumbnail .caption {
  border-color: transparent;
}

.store .store-product:hover .product-actions {
  opacity: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row store">
  <div class="col-xs-12 store-logo">
    <img class="img-responsive" src="img/Walmart_logo.svg_03.png" alt="">
  </div>
  <div class="col-xs-12 col-sm-4 col-md-3 store-product">
    <div class="thumbnail">
      <img class="product-img" src="img/camera.png" alt="product">
      <div class="caption">
        <p class="product-name">Canon EOS 80D + EF-S 18-135mm IS nano USM</p>
        <p class="product-price">$1 300</p>
        <p class="product-actions"><a href="#" class="btn btn-primary" role="button"><i class="fa fa-shopping-cart" aria-hidden="true"></i> add to cart</a> <a href="#" class="btn btn-default" role="button"><i class="fa fa-heart-o" aria-hidden="true"></i> wishlist</a></p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-3 store-product">
    <div class="thumbnail">
      <img class="product-img" src="img/camera.png" alt="product">
      <div class="caption">
        <p class="product-name">Canon EOS 80D + EF-S 18-135mm IS nano USM</p>
        <p class="product-price">$1 300</p>
        <p class="product-actions"><a href="#" class="btn btn-primary" role="button"><i class="fa fa-shopping-cart" aria-hidden="true"></i> add to cart</a> <a href="#" class="btn btn-default" role="button"><i class="fa fa-heart-o" aria-hidden="true"></i> wishlist</a></p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-3 store-product">
    <div class="thumbnail">
      <img class="product-img" src="img/camera.png" alt="product">
      <div class="caption">
        <p class="product-name">Canon EOS 80D + EF-S 18-135mm IS nano USM</p>
        <p class="product-price">$1 300</p>
        <p class="product-actions"><a href="#" class="btn btn-primary" role="button"><i class="fa fa-shopping-cart" aria-hidden="true"></i> add to cart</a> <a href="#" class="btn btn-default" role="button"><i class="fa fa-heart-o" aria-hidden="true"></i> wishlist</a></p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-3 store-product">
    <div class="thumbnail">
      <img class="product-img" src="img/camera.png" alt="product">
      <div class="caption">
        <p class="product-name">Canon EOS 80D + EF-S 18-135mm IS nano USM</p>
        <p class="product-price">$1 300</p>
        <p class="product-actions"><a href="#" class="btn btn-primary" role="button"><i class="fa fa-shopping-cart" aria-hidden="true"></i> add to cart</a> <a href="#" class="btn btn-default" role="button"><i class="fa fa-heart-o" aria-hidden="true"></i> wishlist</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Store row /end -->