Bootstrap 4 responsive button size

问题

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

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.

回答1:

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

---

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

回答2:

In Bootstrap 4 this can be achieved using the utility classes alone.

<a href="#" class="btn btn-primary d-flex justify-content-center d-md-table mx-auto">Book a demo</a>

来源：https://stackoverflow.com/questions/44828004/bootstrap-4-responsive-button-size