一起使用 Bootstrap 4 d-flex 和 d-none 类的问题答案

【问题标题】：Trouble using Bootstrap 4 d-flex and d-none class together一起使用 Bootstrap 4 d-flex 和 d-none 类的问题
【发布时间】：2022-01-05 14:33:51
【问题描述】：

我想在使用 jQuery 函数添加 d-none 类时隐藏整个 <div>。但是这里 .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 规则。

我发现一篇文章说它不会被覆盖。

【问题讨论】：

标签： html jquery css bootstrap-4

【解决方案1】：

CSS 在“最后声明的优先”系统上工作。

在 bootstrap.css 中，这些是按以下顺序定义的：

.d-无 { ... .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-none 之后 d-flex:

<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 之后包含site.css - 它位于上面的<style> 标记中，因为SO sn-ps 将css 块放在html 之前，所以不会覆盖它。

【讨论】：

我认为这是有道理的。因为我使用的是自定义 css，所以我可以在自定义 css 中添加 .d-none 类。谢谢@freedomn-m

【解决方案2】：

我也为使用 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 类之前删除类。

【讨论】：