我刚刚迁移到Bootstrap 4，而我的xs按钮似乎不再显得太小了！
望着在引导4个按钮文档我没有看到额外的小按钮的选项？
谁能为我确认？
谢谢！
btn-xs在引导4中不再是有效选项吗？
Answers:
@ 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>
+1引用原始Source-Link并给予Rifton007应有的荣誉。在Source-Link中，Squadwuschel提出了一个很好的观点，即我们不是每个人都在编写响应式移动应用程序，有时您只是想在网格中滑动一个按钮以获得桌面体验，而不会过度扩展其中的每一行。
—
MikeTeeVee
.btn-group-xs> .btn，.btn-xs {填充：0.40rem .4rem; 字体大小：.775rem; 行高：.5；border-radius：.2rem; }
—
Mayhem项目，
是的，就像@MikeTeeVee所说的那样，“有时您只想在网格中滑动一个按钮，以获得桌面体验，而不会过度扩展它所在的每一行”。那是最大的。他们在想什么？
—
wha7ever
是的btn-xs，Bootstrap 4中没有，您必须自行创建此类。在中，scss/mixins/_buttons.scss您会发现调用了mixin，button-size因此在您的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);
}
可以提供CSS吗？
—
stallingOne '18
button-size（）不再是有效函数。
—
Routhinator
您需要定义自己的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);
}
有一个新的
—
voidstate '17
$line-height参数（在Beta 2中）。现在使用：@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
可以提供CSS吗？
—
stallingOne '18
button-size（）不再是有效函数。
—
Routhinator
是的，我几个小时后才意识到。应该更新答案以提及必须在var工作之前手动加载mixin。
—
Routhinator
我按照Bass Jobsen的建议添加了它：
.btn-xs
+button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height, $border-radius)
使用默认_variables.scss的Bootstrap，结果如下：
希望对您有帮助。
button-size（）不再是有效函数。
—
Routhinator
是的，我几个小时后才意识到。应该更新答案以提及必须在var工作之前手动加载mixin。
—
Routhinator
引导程序4中不再提供额外的小按钮选项。只有3种尺寸可用，大，普通，小。
我从旧版本的Bootstrap中提取了CSS。您可以在自定义样式表中使用以下提到的CSS样式。在名为btn-xs的类的帮助下，您可以将旧样式用作按钮。
祝好运。
button
{
margin-top: 10px;
margin-left: 10px;
}
.btn-xs
{
padding: 1px 5px !important;
font-size: 12px !important;
line-height: 1.5 !important;
border-radius: 3px !important;
}<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css">
<button class="btn btn-primary btn-xs">This is Small Button</button>