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之前，所以不会覆盖它。

我也创建了一个使用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类。

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

d-md-flex

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

上面的所有注解都是正确的，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。