我想隐藏整个<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
规则。
我发现一篇文章说它不会被覆盖。
4条答案
按热度按时间oknwwptz1#
CSS工作在“最后声明优先”的系统上。
在靴带里。css这些是按以下顺序定义的:
.d-none { ... .d-flex { ...
因此第二个优先级(假定其他条件相同,例如
!important
并使用display:
属性)。注意:它们在元素类列表中出现的顺序并不相关,而是它们在css文件。
这里使用bootstrap 4。6、d-flex的
display:
覆盖了d-none的技巧是在 *
d-flex
之后重新定义d-none
*:这可以通过编辑bootstrap来完成。CSS,但一般不推荐。
您通常会将
d-none
定义添加到site.css
并包含站点。css在所有其他css之后-它在上面的<style>
标记中,因为SO片段将css块放在html之前,所以不会覆盖它。kyks70gy2#
我也创建了一个使用jQuery函数的解决方案
在添加
.d-none
类之前删除.d-flex
类。原因是
d-flex
类将根据行调整列,但在这里我想隐藏<div>
和d-flex
类只需要当要显示<div>
的内容,所以d-flex
类删除之前添加d-none
类。r6hnlfcb3#
你需要给这个类添加一个大小:
d-md-flex
然后它将仅对指定的大小有效
https://getbootstrap.com/docs/4.0/utilities/flex/
k4ymrczo4#
上面的所有注解都是正确的,d-flex类覆盖了d-none。我通过使用d-flex作为样式而不是类来解决这个挑战。
然后使用javascript将样式更改为“display:none”。这对使用。show()或.toggle()js。