在Blazemonger的帮助下，我把它添加到我的自定义.scss文件中，重新编译，它运行得很漂亮：

@each $breakpoint in map-keys($grid-breakpoints) {
  @each $size, $length in $sizes {
    @include media-breakpoint-up($breakpoint) {
      .w-#{$breakpoint}-#{$size} {width: $length !important;}
    }
  }
}

在“丑陋如罪”的解决方案类别中，如果您不想使用SCSS，可以执行以下操作：

<!-- Show at 100% width on xs devices. Hide (d-sm-none) on sm and above -->
<element class="w-100 d-sm-none">

<!-- Hide on xs devices. Show normally on sm and above -->
<element class="d-none d-sm-flex">

这可能是一种变通方法，具体取决于您尝试实现的目标的复杂程度。https://getbootstrap.com/docs/4.3/utilities/display/#hiding-elements有关选择性隐藏的详细信息，请参阅www.example.com。

所以我确实找到了另一个合适的解决方案。您将不得不用自己的解决方案覆盖utilities.scss。
在导入utilities.scss后添加下面的代码片段（Docs for Bootstrap API），您甚至可以定义其他值（我添加了33和66）：

$utilities: map-merge(
  $utilities,
  (
    'width': (
      property: width,
      class: w,
      responsive: true,
      values: (
        25: 25%,
        33: 33%,
        50: 50%,
        66: 66%,
        75: 75%,
        100: 100%,
        auto: auto,
      ),
    ),
  )
);

断点的技巧是添加responsive: true,，这将在后面的utilities/api中添加这些断点前缀。

使用bootstrap 5.2，与user1501025相同，但我使用了override使其工作。

$utilities: (
  'width': (
    property: width,
    class: w,
    responsive: true,
    values: (
      25: 25%,
      33: 33%,
      50: 50%,
      66: 66%,
      75: 75%,
      100: 100%,
      auto: auto,
    ),
  )
);

@import "../../node_modules/bootstrap/scss/bootstrap.scss";