有什么方法可以获得特定于断点的宽度类？答案

【问题标题】：Any way to get breakpoint-specific width classes?有什么方法可以获得特定于断点的宽度类？
【发布时间】：2018-05-25 09:38:01
【问题描述】：

Bootstrap 4 包括 width classes:

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

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

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

【问题讨论】：

使用 Bootstrap 的 _sizing.scss 作为指南应该很容易添加到您自己的 SCSS。
谢谢。我对 Sass 了解不多，但是根据您的评论（以及一些闲逛），我能够弄清楚。
一个相关的功能请求，目前被忽略：github.com/twbs/bootstrap/issues/26528
相关：stackoverflow.com/a/66758895/633961（通过min-width和max-width解决）

标签： css twitter-bootstrap bootstrap-4

【解决方案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;}
    }
  }
}

【讨论】：

我必须添加这个才能让你的代码工作 $sizes: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, );但它奏效了，谢谢！

【解决方案2】：

在 'ugly as sin' 解决方案类别中，如果您不想使用 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。

【讨论】：