使用了
Bootstrap 3.x 框架和jQuery 2.x 库。
我在三个不同的行中有四个 div。当鼠标悬停时，我正在使用 jQuery 更改 div 高度。
使用 z-index 和绝对位置中断 Bootstrap 响应。
将 z-index 和绝对位置与 .col-xs-* 一起使用可以提供有效的解决方案。然而，结果并不适合移动设备。
$(function() {
console.log(">>> jQuery is ready");
$(".site-box-id-01").mouseenter(function() {
console.log(">>> mouse enter");
$(this).stop(true, false).animate({
height: "500px"
}, {
duration: 100
});
}).mouseleave(function() {
console.log(">>> mouse leave");
$(this).stop(true, false).animate({
height: "300px"
}, {
duration: 100
});
});
});.site-box {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: white;
}
.row {
border: 1px dashed black;
height: 301px;
/* fix row height*/
}
.site-row-id-01 {
background-color: blanchedalmond;
}
.site-row-id-02 {
background-color: azure;
}
.site-box-id-01 {
position: absolute;
z-index: 1;
}<body>
<div class="container-fluid">
<div class="row" id="site-row-id-01">
<div class="col-sm-4">
<div class="site-box site-box-id-01">Test Box 01</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-01">Test Box 02</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-01">Test Box 03</div>
</div>
</div>
<div class="row row-class-02" id="site-row-id-02">
<div class="col-sm-4">
<div class="site-box site-box-id-02">Test Box 04</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-02">Test Box 05</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-02">Test Box 06</div>
</div>
</div>
</div>
</body>正常状态
对于桌面 
期望的结果
对于桌面 
当前结果
对于桌面 
(不使用绝对位置和z-index)
(使用绝对位置和z-index)
最佳答案
我在 http://jsbin.com/fulequ/3/edit 有一个解决方案我认为可以满足您的需求。
首先，您的 html 没有真正响应。我修改如下。 class="col-xs-6 col-sm-3"在桌面模式下提供 4 列，在移动 View 下提供 2 列。
<div class="row" >
<div class="col-xs-6 col-sm-3">
<div class="site-box site-box-id-01">Test Box 01</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="site-box site-box-id-01">Test Box 02</div>
</div>
<div class="col-xs-6 col-sm-3" >
<div class="site-box site-box-id-01">Test Box 03</div>
</div>
<div class="col-xs-6 col-sm-3 ">
<div class="site-box site-box-id-01">Test Box 04</div>
</div>
</div>
要在桌面模式下垂直扩展 block ，请将以下 CSS 类添加到 <div class="site-box site-box-id-01">并在 mouseleave() 函数上将其删除。
.expand-box{
z-index:1;
height: 150px;
position: absolute;
background-color: yellow;
}
对于您上面描述的移动 View ，JavaScript 必须执行以下操作
- 将“行”div 的高度设置为实际高度。
- 对于每个位置，他们绝对与他们当前所处的位置相对应。
- 将扩展框 CSS 类添加到 div 以进行放大。
在 mouseleave 上，JavaScript 必须撤消上述步骤。
关于css - 更改 div 的高度并设置绝对位置中断 Bootstrap 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29315998/