jquery 同时使用Bootstrap 4d-flex和d-none类时出现问题

p8h8hvxi  于 2023-04-29  发布在  jQuery
关注(0)|答案(4)|浏览(119)

我想隐藏整个<div>时使用jQuery函数添加d-none类。但是这里的.d-none类不能和.d-flex类一起工作。

编码前

<div class="row d-flex align-items-center ping gatewayBtn reset"> </div>

代码后

<div class="row d-flex align-items-center ping gatewayBtn reset d-none"> </div>

我也参考了Bootstrap CSS,发现两个类都使用!important规则。
我发现一篇文章说它不会被覆盖。

oknwwptz

oknwwptz1#

CSS工作在“最后声明优先”的系统上。
在靴带里。css这些是按以下顺序定义的:
.d-none { ... .d-flex { ...
因此第二个优先级(假定其他条件相同,例如!important并使用display:属性)。
注意:它们在元素类列表中出现的顺序并不相关,而是它们在css文件。
这里使用bootstrap 4。6、d-flex的display:覆盖了d-none的

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div id='div' class='d-flex d-none'>
example
</div>

技巧是在 * d-flex之后重新定义d-none *:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<style>
.d-none { display:none !important; }
</style>

<div id='div' class='d-flex d-none'>
example
</div>

这可以通过编辑bootstrap来完成。CSS,但一般不推荐。
您通常会将d-none定义添加到site.css并包含站点。css在所有其他css之后-它在上面的<style>标记中,因为SO片段将css块放在html之前,所以不会覆盖它。

kyks70gy

kyks70gy2#

我也创建了一个使用jQuery函数的解决方案

var class_name = "gatewayBtn";
$('.'+class_name).toggleClass('d-flex').toggleClass('d-none');

在添加.d-none类之前删除.d-flex类。
原因是d-flex类将根据行调整列,但在这里我想隐藏<div>d-flex类只需要当要显示<div>的内容,所以d-flex类删除之前添加d-none类。

r6hnlfcb

r6hnlfcb3#

你需要给这个类添加一个大小:

d-md-flex

然后它将仅对指定的大小有效
https://getbootstrap.com/docs/4.0/utilities/flex/

k4ymrczo

k4ymrczo4#

上面的所有注解都是正确的,d-flex类覆盖了d-none。我通过使用d-flex作为样式而不是类来解决这个挑战。

<div class="row align-items-center ping gatewayBtn reset" style="display: flex"> </div>

然后使用javascript将样式更改为“display:none”。这对使用。show()或.toggle()js。

相关问题