html - 悬停时 -15px 的边距使 div 更大，将 Bootstrap 列推到更低的下方

Question

主要是在标题中。我在我的网站上以 div 形式展示产品。在悬停时，我通过应用 -15px 的边距来增加它们的大小，使它们具有很好的悬停效果。当我将鼠标悬停在它们中的任何一个上时，除了最右边的那些，它都很好，因为它会将它下面的产品推到下面的 Bootstrap 行中。以下是图片:

好(悬停在中间一个):

差(悬停在最右边的那个):

代码如下:

搜索结果页面:

    <div id="search-results">
    <div data-bind="template: { name: 'product-template', foreach: allProducts }"></div>
</div>

产品模板:

<script type="text/html" id="product-template">
    <div class="col-sm-6 col-lg-2" style="margin-top:20px; padding: 25px;">
        <div class="product-item">
            <div data-bind="style: { backgroundImage: 'url(\'../../the_vegan_repository/product_images/' + product.imagePath + '\')' }"
                 style= "height: 160px; 
                        border-top-left-radius: 10px; 
                        border-top-right-radius: 10px;
                        color: white; 
                        background: center no-repeat;
                        background-size:cover;
                        vertical-align:bottom;">
            </div>
            <div style="height: 110px; padding: 10px; background: #fc4747;">
                <h6 class="medium-text" data-bind="text: product.brand" style="text-transform: uppercase; color: white; margin-top:0; margin-bottom:5px;"></h6>
                <h6 class="medium-text" data-bind="text: product.name" style="text-transform: uppercase; color: white; margin-bottom:5px;display: inline;"></h6>
            </div>
        </div>
    </div>
</script>

CSS:

div.product-item:hover {
  margin: -15px;
}
div.product-item {
  border: 5px solid #fc4747;
  border-radius: 15px;
  height: 240px;
  overflow: hidden;
  cursor: pointer;
}

如何阻止 Bootstrap 网格系统将底部行插入较低的行？

Answer 1

on hover, I make them increase in size by applying a margin of -15px

使用 transform: scale(x); 而不是 margin: -15px; 因为变换不会影响元素的盒模型。

CSS Transforms Module Level 1:

Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].