Angular项目中_rfs.scss覆盖col-md-6宽度致网格布局异常

数据老陈

2026-7-23

问题描述

在使用Bootstrap与NgBootstrap的Angular项目中，尝试通过col-md-6实现中等屏幕以上显示2列的网格布局时，发现_rfs.scss的规则覆盖了col-md-6的width属性，导致布局异常。在全新Angular项目中复现相同代码可正常渲染，已排除样式导入、依赖配置、全局样式等问题，怀疑问题为组件特定。现咨询：

为何原始项目会出现_rfs.scss的row规则而新项目没有？
如何解决该布局异常问题？

相关代码示例

HTML代码

<div class="container-fluid">
  <div class="row">
    <ng-container *ngFor="let entry of entries">
      <span 
        class="col-md-6"
        style="height: 3rem; border: 2px solid black;"
      >
        Text
      </span>
    </ng-container>
  </div>
</div>

TypeScript代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  entries = Array(8).fill(undefined);
}

全局styles.scss代码

@import './custom_bootstrap.scss';
@import '/node_modules/bootstrap/scss/bootstrap.scss'; //Must be imported after custom_bootstrap so that values from custom_bootstrap are available for overriding
@import './variables.scss';

html{
    font-size: 16px;
}

body{
    font-family: "Source Sans Pro", sans-serif;
    overflow-x: hidden;
}

.highlight{
    background-color: var(--highlight-gray);
}

.hover-highlight{
    transition: 0.2s background-color;
}

.pointer{
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .hover-highlight:hover{
        background-color: var(--highlight-gray);
    }
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
    font-weight: bold!important;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}


h1{
    letter-spacing: 0.5rem!important;
    font-size: 2.25rem!important;
    line-height: 1.3!important;
}

h2{
    letter-spacing: 0.2rem!important;
    font-size: 1.5rem!important;
}

blockquote{
    border-left: solid 4px var(--bs-white);
    font-style: italic;
    margin: var(--spacer-0);
    padding: var(--spacer-2) var(--spacer-0) var(--spacer-1) var(--spacer-4);
}

@import './custom_ngbootstrap.scss';
@import './global_class_modifications.scss';
@import './custom_leaflet.scss';

解决方案

1. 原始项目出现_rfs.scss规则的原因

RFS（Responsive Font Sizing）是Bootstrap内置的响应式字体缩放工具，默认仅处理字体相关属性，但如果项目中修改了RFS配置，开启了对width、margin等布局属性的处理，或者第三方依赖/自定义样式调用了RFS混合宏处理布局属性，就会生成额外的RFS规则覆盖.row或列元素的样式。
你的原始项目大概率在custom_bootstrap.scss或其他自定义文件中修改了RFS的配置项，或者引入了触发RFS处理布局属性的样式；而新项目无此类自定义配置，所以不会生成相关规则。

2. 解决布局异常的方法

方法一：修正RFS配置

在custom_bootstrap.scss中限制RFS仅处理字体属性，避免干预布局：

// 限制RFS仅作用于字体相关属性
$rfs-enabled: true;
$rfs-property-list: (font-size, line-height); // 移除width等布局属性

重新编译样式后，RFS就不会再修改列元素的width值。

方法二：强制覆盖冲突样式

在组件的app.component.scss中添加高优先级样式，恢复col-md-6的正确宽度：

@media (min-width: 768px) {
  .col-md-6 {
    width: 50% !important;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

注：!important仅在必要时使用，若调整样式导入顺序可解决则优先不用。

方法三：检查组件样式隔离

Angular组件默认启用样式隔离（ViewEncapsulation.Emulated），若组件设置了encapsulation: ViewEncapsulation.None，可能导致全局RFS规则污染组件样式。检查组件元数据：

@Component({
  // ...其他配置
  encapsulation: ViewEncapsulation.Emulated // 确保使用默认隔离模式
})

方法四：替换列元素标签

Bootstrap网格系统针对块级元素设计，当前使用的<span>虽会被设置为display: block，但存在潜在兼容性问题，替换为<div>：

<div class="col-md-6" style="height: 3rem; border: 2px solid black;">
  Text
</div>

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