更改div的高度并设置绝对位置breakButstrap响应 [英] Change div's height and set absolute position break Bootstrap responsiveness
问题描述
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（> ）; $（this）.stop（true，false）.animate（{height：500px}，{duration：100}）;}）。mouseleave（function（）{console.log（> > mouse leave）; $（this）.stop（true，false）.animate（{height：300px}，{duration：100}）;}）;}）;/ pre>.site-box {width：300px; height：300px; border：1px solid black; background-color：white;}。row {border：1px black 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 ：绝对z-index：1;}
< body& < div class =container-fluid> < div class =rowid =site-row-id-01> < div class =col-sm-4> < div class =site-box site-box-id-01>测试框01< / div> < / div> < div class =col-sm-4> < div class =site-box site-box-id-01>测试框02< / div> < / div> < div class =col-sm-4> < div class =site-box site-box-id-01>测试框03< / div> < / div> < / div> < div class =row row-class-02id =site-row-id-02> < div class =col-sm-4> < div class =site-box site-box-id-02>测试框04< / div> < / div> < div class =col-sm-4> < div class =site-box site-box-id-02>测试框05< / div> < / div> < div class =col-sm-4> < div class =site-box site-box-id-02>测试框06< / div> < / div> < / div> < / div>< / body>
正常状态
桌面版
For Mobile
所需结果
桌面版
>
For Mobile
>
当前结果
桌面版
（不使用绝对定位和 z -index ）
For Mobile
（使用绝对定位和 z-index ）
首先，你的html没有真正的响应。我修改它如下。 class =col-xs-6 col-sm-3在桌面模式下提供4列，在移动视图中提供2列。
< div class =row>
< div class =col-xs-6 col-sm-3>
< div class =site-box site-box-id-01>测试框01< / div>
< / div>
< div class =col-xs-6 col-sm-3>
< div class =site-box site-box-id-01>测试框02< / div>
< / div>
< div class =col-xs-6 col-sm-3>
< div class =site-box site-box-id-01>测试框03< / div>
< / div>
< div class =col-xs-6 col-sm-3>
< div class =site-box site-box-id-01>测试框04< / div>
< / div>
< / div>
要在桌面模式下垂直扩展块，请将以下CSS类添加到< div class =site-box site-box-id-01> ，并将其从mouseleave（）函数中删除。
.expand-box {
z-index：1;
height：150px;
position：absolute;
background-color：yellow;
}
对于上面描述的移动视图，JavaScript必须执行以下操作
- 将rowdiv的高度设置为实际高度。
- 对于每个位置，他们绝对是他们当前的位置。
- 将扩展框CSS类添加到div放大。 / li>
在鼠标移动时，JavaScript必须撤消上述步骤。
Bootstrap 3.x framework and jQuery 2.x library are been used.
I have four divs in three different rows. I am using jQuery to change the div height when mouse hover.
Use of z-index and absolute position break Bootstrap responsivness.
Using z-index and absolute position with .col-xs-* can provide a working solution. However, the result is not mobile friendly.
$(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>
The Normal State
For Desktop For MobileThe Desired Result
For Desktop For MobileThe Current Result
For Desktop(NOT Using Absolute Positon and z-index )
For Mobile(Using Absolute Positon and z-index)
I have a solution at http://jsbin.com/fulequ/3/edit that I think meets your needs.
First, your html wasn't really responsive. I modified it as below. class="col-xs-6 col-sm-3" gives 4 columns in desktop mode and 2 columns in mobile view.
<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>
To expand a block vertically in desktop mode, add the following CSS class to the <div class="site-box site-box-id-01">and remove it on mouseleave() function.
.expand-box{
z-index:1;
height: 150px;
position: absolute;
background-color: yellow;
}
For the mobile view you describe above, the JavaScript has to do the following
- Set the height of the "row" div to the actual height that it is.
- For each of the position them absolutely to the position that they are currently at.
- Add expand-box CSS class to div to enlarge.
On mouseleave, the JavaScript has to undo the above steps.
这篇关于更改div的高度并设置绝对位置breakButstrap响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
