Bootstrap 4 响应式按钮大小

Question

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

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

Answer 1

使用 media-breakpoint-between mixin 分配 .btn .btn-sm 大小...

/* 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 已略微更改为：

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

Answer 2

在 Bootstrap 4 中，这可以单独使用实用程序类来实现。

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

Answer 3

如果要使按钮响应，则需要使其文本响应。

您可以使用 vw（视口宽度）作为字体大小：

@media (max-width: 576px) {
  .responsive-content {
    font-size: 6vw;
  }
}

<button type="button" class="responsive-content btn btn-primary">
  responsive button
</button>

现在您可以调整屏幕大小来查看效果。

Bootstrap 4 响应式按钮大小

Bootstrap 4 responsive button size

css

sass

twitter-bootstrap-4

bootstrap-4