如何修改Bootstrap 3模态框的display属性类型？

你的问题根源在于直接给模态框元素设置display: flex，覆盖了Bootstrap默认的display: none隐藏规则，导致模态框一直处于可见状态。Bootstrap模态框的显示/隐藏是通过添加/移除.show类来控制的，激活时.modal.show会把display设为block。

要实现激活时用flex布局，只需针对激活状态的模态框设置样式即可，这样平时模态框仍保持隐藏：

修改你的CSS代码为：

.modal.show#HelpModal {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

说明： #

• 使用.modal.show#HelpModal作为选择器，确保只有当模态框处于激活状态（添加了.show类）时才应用flex布局
• 添加!important是为了确保该样式优先级高于Bootstrap默认的.modal.show { display: block; }规则，避免被覆盖
• 你可以保留HTML中的d-flex类，但通过上述CSS已经能实现效果，去掉也不会影响

这样修改后，点击按钮激活模态框时，它会以flex布局居中显示，未激活时则保持隐藏状态，完全不需要JavaScript干预。

内容的提问来源于stack exchange，提问作者Finlay Metcalfe