有没有一种方法可以获得特定于断点的宽度类？

Question

Bootstrap 4 包含 宽度类：

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

我希望只在特定的断点及以上指定宽度，例如“w-md-25”等。

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

- Matthew

---

应该很容易将其添加到您自己的SCSS中，使用Bootstrap的“_sizing.scss”作为指南。 - Blazemonger

谢谢。我对Sass不是很了解，但是通过你的评论（和一些探索），我能够弄清楚它了。 - Matthew

一个相关的功能请求，目前被忽略：https://github.com/twbs/bootstrap/issues/26528 - Duncan Jones

相关链接：https://stackoverflow.com/a/66758895/633961 （通过 min-width 和 max-width 的解决方法） - guettli

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;}
    }
  }
}

- Matthew

---

我不得不添加这个来使你的代码生效 $sizes: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, ); 但是它奏效了，谢谢！ - Barrard

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。

- Duncan Jones

Answer 3

所以我找到了另一个适当的解决方案。您将不得不使用自己的utilities.scss进行覆盖。

在导入utilities.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 中添加这些断点前缀。

- user1501025

---

完美解决方案！！！Bootstrap 5.1 - Imran Mohammed

Answer 4

使用Bootstrap 5.2，与user1501025相同，但我使用覆盖来使其正常工作。

$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";

- David Fleury