btn-xs不再是bootstrap 4中的有效选项吗？

Question

我刚刚迁移到bootstrap 4，我的xs按钮似乎不再特别小！

看看docs for buttons in bootstrap 4我没有看到额外小按钮的选项？

谁能为我证实这一点？

谢谢！

Answer 1

@rifton007在GitHub问题上发布了关于此主题的快速修复。在您的css文件中添加：

.btn-group-xs > .btn, .btn-xs {
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}

演示：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<style>
.btn-group-xs > .btn, .btn-xs {
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}
</style>

<button class="btn btn-primary btn-xs">♡</button>
<button class="btn btn-primary btn-sm">♡</button>
<button class="btn btn-primary">♡</button>
<button class="btn btn-primary btn-lg">♡</button>

source

Answer 2

是的，Bootstrap 4中没有btn-xs，你必须自己创建这个类。在scss/mixins/_buttons.scss中，你会发现名为button-size的mixin，所以在你的SCSS代码中使用以下代码：

.btn-xs {
  // line-height: ensure proper height of button next to extra small input 
  @include button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius);
}

Answer 3

你需要定义你自己的xs样式和变量，这对我来说最匹配，接近bootstrap 3 btn-xs大小：

Bootstrap 4 Alpha

$btn-padding-x-xs: .38rem !default;
$btn-padding-y-xs: .18rem !default;

.btn-xs {
    @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $btn-border-radius-sm);
}

Bootstrap 4 Beta 2

$btn-padding-x-xs:  .20rem !default;
$btn-padding-y-xs:  .12rem !default;
$input-btn-line-height-xs: 1.1 !default;

.btn.btn-xs {
   // line-height: ensure proper height of button next to small input
   @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-xs, $btn-border-radius-sm);
}

Answer 4

我添加了这个，因为Bass Jobsen建议：

.btn-xs
  +button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height, $border-radius)

使用Bootstrap的默认_variables.scss，结果如下：

希望它能帮到你。