Bootstrap 4 响应式按钮大小 [英] Bootstrap 4 responsive button size

问题描述

Bootstrap 4 中是否有办法在 media-breakpoint-xs 中添加类btn-sm"(小按钮)?

Is there a way in Bootstrap 4 to add the class 'btn-sm' (small button) when in the media-breakpoint-xs?

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

I'd like to the buttons to be default size except in xs screens where I'd like them to automatically switch to btn-sm.

推荐答案

Assign .btn 使用 media-breakpoint-between mixin...

Assign .btn the .btn-sm sizing using the media-breakpoint-between mixin...

/* 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

<小时>更新 - Bootstrap 4.1
这个 button-size mixin 稍微改变为:

---

Update - Bootstrap 4.1
This button-size mixin has changed slightly to:

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

这篇关于Bootstrap 4 响应式按钮大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！