Bootstrap中w-70等非预设宽度类无效的原因及解决方法

问题原因 #

Bootstrap的内置宽度工具类（w-*）仅预设了w-25、w-50、w-75、w-100这几个百分比值，像w-70、w-45这类自定义数值的类并没有对应的样式定义，浏览器无法识别，进度条只能靠内部文本撑开极小宽度（也就是你看到的约5%）。

解决方案 #

下面提供三种实用方法实现自定义宽度的进度条：

方法1：使用内联样式（最快最直接）

直接给progress-bar元素添加style属性设置宽度，无需额外CSS：

<div class="progress">
     <div class="progress-bar bg-success" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div>

方法2：自定义CSS类（适合复用场景）

在你的CSS样式表中添加自定义宽度类，之后就可以像内置类一样使用：

/* 自定义宽度类 */
.w-70 {
  width: 70% !important; /* 可选：添加!important确保优先级覆盖默认样式 */
}
.w-45 {
  width: 45% !important;
}

然后HTML中直接调用：

<div class="progress">
     <div class="progress-bar w-70 bg-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div>

方法3：通过Sass扩展Bootstrap工具类（适合项目级自定义）

如果你的项目使用Bootstrap的Sass源码，可以修改宽度变量来生成自定义工具类，统一管理所有宽度类：

// 覆盖或扩展Bootstrap的宽度变量
$widths: (
  25: 25%,
  50: 50%,
  70: 70%, // 添加自定义宽度
  45: 45%, // 添加自定义宽度
  75: 75%,
  100: 100%
);

// 调用Bootstrap的混合宏生成宽度类
@include make-widths($widths);

编译Sass后，w-70、w-45就会成为内置可用的工具类。

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