Question

Bootstrap 4包含width classes：

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

我想仅为某些断点及以上指定宽度;例如，＆＃34; w-md-25＆＃34;等等

是否可以在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。

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

2 个答案: