有什么方法可以获取断点特定的宽度类吗？

Question

Bootstrap 4 包括 width 类：

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。

只需在导入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

中添加这些断点前缀。

Answer 4

使用 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";

Answer 5

无需修改 CSS，您可以通过 row / col 来完成此操作：

<div class="row">
  <div class="col-3"></div>
  <div class="col-lg-6 col-12">
    Content Goes Here
  </div>
  <div class="col-3"></div>
</div>