更改div的高度并设置绝对位置breakButstrap响应

编程入门行业动态更新时间:2024-10-28 02:36:01

本文介绍了更改div的高度并设置绝对位置breakButstrap响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述已使用

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 ）

解决方案

我在 http：// jsbin上有一个解决方案。

首先，你的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; }

The Normal State For Desktop

For Mobile

The Desired Result For Desktop

For Mobile

The Current Result For Desktop

(NOT Using Absolute Positon and z-index )

For Mobile

(Using Absolute Positon and z-index)

解决方案

I have a solution at jsbin/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.

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响应

本文发布于:2023-10-08 04:37:52，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1471532.html