悬停时 -15px 的边距使 div 更大将引导列推到更低答案

【问题标题】：Margin of -15px on hover to make div bigger pushes bootstrap columns below lower悬停时 -15px 的边距使 div 更大将引导列推到更低
【发布时间】：2016-09-02 02:43:50
【问题描述】：

它主要在标题中。我在我的网站上的 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 网格系统将底行推入下一行？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

在悬停时，我通过应用 -15px 的边距来增加它们的大小

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

CSS Transforms Module Level 1:

注意：转换确实会影响画布上的视觉布局，但不会影响 CSS 布局本身。这也意味着转换不会影响 [CSSOM-VIEW] 中指定的元素接口扩展 getClientRects() 和 getBoundingClientRect() 的结果。

【讨论】：

【解决方案2】：

如果您想将其上移一定数量，请使用transform: translateY(-15px) 而不是更改div.product-item:hover 类上的margin。在不中断文档其余部分的上下文中移动它。或者你可以使用transform: scale(1.2) 让事情变得更大。

【讨论】：

【解决方案3】：

问题在于，当您更改边距时，它实际上会更改 div 的尺寸，这反过来会影响其他人。看看这个链接。它给出了一个如何给出这种缩放效果的例子。 Creating a Zoom Effect on an image on hover using CSS?

【讨论】：