Angular 8升级至12搭配Bootstrap5后fieldset边框样式异常求助

算力阿峰

2026-9-30

问题原因

Bootstrap 5 对<fieldset>、<legend>标签做了全局默认样式重置，新增了float: left、width: 100%等规则，覆盖了原生HTML中legend自带的「打断fieldset边框」的默认表现，因此出现边框整体包裹legend的异常效果。

修复方案

直接在原有CSS基础上调整legend样式即可，修改后的完整CSS如下：

.scheduler-border-fieldset {
    border: 1px groove #ddd !important;
    /* 顶部padding调整为0.8em，给legend留出足够的显示空间 */
    padding: 0.8em 1.4em 0.4em 1.4em !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: #333333;
    vertical-align: middle;
}

legend  {
    font-size: medium;
    font-weight: bold;
    background-color: #aeccea;
    vertical-align: middle;
    /* 以下是新增的覆盖Bootstrap默认样式的规则 */
    float: none;
    width: auto;
    /* 左右内边距控制文字两侧的背景宽度，刚好覆盖对应位置的边框 */
    padding: 0 10px;
    /* 消除默认下边距，让legend刚好贴合边框位置 */
    margin-bottom: 0;
    /* 可根据实际显示效果微调这个值，控制legend上下位置 */
    margin-top: -1.2em;
}