如何实现折叠按钮与虚线效果同时正常工作？

安全阿岳

2026-7-23

问题

移除CSS中的display: flex !important;代码行时，点击Set1标题的折叠按钮能正常工作，但会丢失中间的虚线；保留该行代码时，虚线显示正常，但折叠按钮完全失效。

解决方案

问题核心是!important强制覆盖了Bootstrap Collapse组件自带的display: none隐藏样式，导致折叠时元素无法被正常隐藏。只需调整CSS选择器，让flex布局仅作用于展开状态的元素即可：

移除display: flex后的!important，避免强制覆盖组件默认样式
给.lev1/.lev2/.lev3的选择器加上.show类（Bootstrap Collapse展开时会自动给元素添加这个类），确保只有展开的元素才应用flex布局和虚线样式

修改后的完整CSS代码：

/* 仅对展开状态的元素应用flex布局 */
.lev1.show, .lev2.show, .lev3.show {
    display: flex;
    align-items: flex-end;
    margin-top: 5px;
    margin-left: 15px;
}

/* 仅在元素展开时显示虚线 */
.lev1.show:after, .lev2.show:after, .lev3.show:after {
    content: '';
    flex: auto;
    min-width: 24px;
    margin: 0 6px;
    height: 2px;
    color: lightgrey;
    margin-bottom: 4px;
    background-image: linear-gradient(to right,currentColor 2px,transparent 1px);
    background-size: 4px 2px;
}

.DataRightAlign {
  flex: none;
  word-wrap: break-word;
  white-space: break-spaces;
  max-width: 62%;    
  margin-right: 20px;
  margin-left: 10px;
  color: black; 
}

.DataRightAlign:last-child {
    order: 1;
    text-align: right;
}

HTML代码无需修改，调整后效果：