Bootstrap 5 vr组件currentColor颜色异常：标尺深浅随布局切换

问题说明 #

在Bootstrap 5中使用vr组件作为三个col-sm-3列（内部包含Chart.js图表）之间的垂直分隔线，分隔线放在col-sm-1列内。出现两个vr颜色深浅不同的情况，且为row添加justify-content: center样式后，深浅会互换。检查元素发现两者的background-color均为currentColor，当前使用Angular框架。

原因分析 #

这种现象通常由以下几种情况导致：

• currentColor继承差异：不同位置的vr父元素可能因布局或Angular视图封装，继承了细微差别的文本颜色，导致渲染出的分隔线颜色深浅不同。
• 视觉像素偏移：flex布局对齐方式变化时，vr元素的位置可能产生1px偏移，加上半透明默认样式，视觉上呈现出深浅差异。
• 容器层级过多：嵌套的d-flex容器可能导致样式继承出现意外情况。

解决方案 #

1. 强制指定vr颜色（最直接有效） #

脱离currentColor的继承，直接给vr元素设置固定颜色，比如使用Bootstrap默认边框色#dee2e6：

<div class="col-sm-1 align-self-center d-flex justify-content-center">
    <div class="vr" style="height: 120px; background-color: #dee2e6;"></div>
</div>

如果是Angular组件，可在组件样式中全局设置（穿透视图封装）：

:host ::ng-deep .vr {
    background-color: #dee2e6 !important;
}

2. 简化容器结构 #

去掉多余的嵌套容器，直接在col-sm-1上组合flex类，减少样式继承层级：

<div class="col-sm-1 d-flex justify-content-center align-self-center">
    <div class="vr" style="height: 120px;"></div>
</div>

3. 统一父元素文本颜色 #

给所有包含vr的col-sm-1列添加统一类，强制设置currentColor的来源：

<div class="col-sm-1 vr-column align-self-center d-flex justify-content-center">
    <div class="vr" style="height: 120px;"></div>
</div>

组件样式中添加：

.vr-column {
    color: #dee2e6;
}

修改后完整代码示例 #

<div class="container-fluid">
    <div class="card border-0">
        <div class="card-body bg-body rounded">
            <div class="row justify-content-center">
                <div class="col-sm-3">
                    <div class="container">
                        foobar1
                        <canvas id="one"></canvas>
                    </div>
                </div>
                <div class="col-sm-1 d-flex justify-content-center align-self-center">
                    <div class="vr" style="height: 120px; background-color: #dee2e6;"></div>
                </div>
                <div class="col-sm-3">
                    <div class="container">
                        foobar2
                        <canvas id="two"></canvas>
                    </div>
                </div>
                <div class="col-sm-1 d-flex justify-content-center align-self-center">
                    <div class="vr" style="height: 120px; background-color: #dee2e6;"></div>
                </div>
                <div class="col-sm-3">
                    <div class="container">
                        foobar3
                        <canvas id="three"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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