Bootstrap 4 响应式按钮大小

Question

Bootstrap 4 中有没有办法在 media-breakpoint-xs 中添加类“btn-sm”（小按钮）？

我希望按钮为默认大小，但在 xs 屏幕中我希望它们自动切换到 btn-sm。

原文由 Nik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

分配 .btn .btn-sm 使用 media-breakpoint-between 混合…

 /* change all .btn to .btn-sm size on xs */
@include media-breakpoint-between(xs,sm){
  .btn {
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
  }
}

https://www.codeply.com/go/FoEUO7XCDU

---

更新 - 引导 4.1

这个 button-size mixin 稍微改成了：

 @include media-breakpoint-between(xs,sm){
  .btn {
      @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
  }
}

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议