有没有办法获得特定于断点的宽度类？

Question

Bootstrap 4 包括宽度类：

w-25
w-50
w-75
w-100

我只想为某些断点及以上指定宽度；例如，“w-md-25”等。

是否可以在 SCSS 文件中添加此类类，或者以其他方式获得此功能？

Answer 1

在 Blazemonger 的帮助下弄明白了。我将它添加到我的 custom.scss 文件中，重新编译，它工作得很好：

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

Answer 2

在“丑陋如罪”的解决方案类别中，如果您不想使用 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 。

Answer 3

所以我确实找到了另一个合适的解决方案。您必须用自己的文件覆盖utilities.scss。

只需在导入 utility.scss 之后添加下面的代码片段（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.